querySelector vs querySelectorAll dalam javascript-tutorial js-php.cn

querySelector vs querySelectorAll dalam javascript

Susan Sarandon

Lepaskan： 2024-10-17 06:29:02

asal

939 orang telah melayarinya

querySelector vs querySelectorAll in javascript

querySelector vs querySelectorAll both are used select and manupulate DOM elements but they have some different behavior

1.querySelector
Returns the first matching element in the DOM that satisfies the CSS selector. If no match is found, it returns null.

<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

<script>

const link  = document.querySelector("a")
console.log(link); // <a href="/html/">HTML</a>

</script>

</body>
</html>

Salin selepas log masuk

in the above code example we can see inside script tag i have selected a tag and we are getting only first one matching element not all.

2.querySelectorAll
Returns all matching elements as a NodeList, which is a collection of elements. If no match is found, it returns an empty NodeList.

<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

<script>

const link  = document.querySelectorAll("a")
console.log(link); // // [object NodeList] (4) [<a/>,<a/>,<a/>,<a/>]

</script>

</body>
</html>

Salin selepas log masuk

in the above code example we can see inside script tag i have selected a tag and we are getting all matching elements as a NodeList.

Atas ialah kandungan terperinci querySelector vs querySelectorAll dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!