querySelector vs querySelectorAll in javascript

Published at

10/16/2024

Categories

3 categories in total

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>

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>

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.

dev-resources.site

querySelector vs querySelectorAll in javascript