This content originally appeared on DEV Community and was authored by sagar
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.
This content originally appeared on DEV Community and was authored by sagar
sagar | Sciencx (2024-10-16T18:17:31+00:00) querySelector vs querySelectorAll in javascript. Retrieved from https://www.scien.cx/2024/10/16/queryselector-vs-queryselectorall-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.