This quick tutorial helps you understand the usage of JavaScript querySelector() and querySelectorAll() methods in detail.
We will learn how to effortlessly find the HTLM DOM elements with querySelector and querySelectorAll DOM API.
DOM stands for the document object model; combining all the HTML elements forms a tree structure. Any element can be accessed using modern browser API provided by JavaScript.
In this tutorial, i am going to enumerate the best tips and tricks to iterate over a NodeList with the help of the JavaScript forEach() loop. Also, how to transform a NodeList using JavaScript Array.from() method to Array.
JavaScript is getting famous due to its flexible behavior, and the number of APIs provided to modern browsers. Getting the DOM elements is also possible with some handful of CSS selectors. For instance, we will query the DOM elements CSS class and id.
This is the HTML template, which is made of multiple DOM elements that we are going to query in a while.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>JavaScript DOM API querySelector and querySelectorAll Examples</title>
</head>
<body>
<div class="wrapper">
<div class="name">Liam</div>
<div class="name">Noah</div>
<div class="name">William</div>
<div class="name">James</div>
<div class="name">Benjamin</div>
<div class="name">Elijah</div>
</div>
<div id="country">USA</div>
<footer>www.positronx.io - copyright 2020</footer>
<script>
// code goes here
</script>
</body>
</html>The querySelectorAll Example
Here is the querySelectorAll syntax; it is mainly integrated on the basis of ParentNode mixin.
listElements = parentNode.querySelectorAll(css-selector);
To search the DOM elements first you need to define the script tags in the HTML template approximately at the bottom, query the div with class="name" using querySelectorAll() JavaScript API.
<script>
let name = document.querySelectorAll(".name");
console.log(name);
</script>The document.querySelectorAll(".name") function returns 6 DOM elements with the CSS selector name.
NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll().
– MDN
The querySelector API Example
We have seen how to query a DOM list, but how about traversing through a single DOM element. Well, worry not, this where querySelector comes into light and does the job for you.
Before we go ahead check out the syntax:
domElement = parentNode.querySelector(css-selector);
The querySelector method takes CSS selector as an argument, which mainly consists of ID and Class; it returns the targeted DOM element.
<script>
let country = document.querySelector("#country");
console.log(country);
</script>The above function did precisely we were expecting it to do so, it returned the country name using the country id.
Loop Over NodeList Elements with querySelectorAll using forEach
Now, we will see how to loop over every NodeList element using the querySelectorAll and forEach loop.
Using forEach to iterate over a NodeLis is easy with querySelectorAll; however, i am skeptical about the browser’s support. However, it supports Firefox and chrome but does not work so well in other browsers such as Edge and Safari.
name.forEach((elements) => {
console.log(elements);
})
forEach on NodeLists with queryselectorall Browsers Support
We have previously discussed that NodeList with foreach does not support all browsers. Nevertheless, we have a few tricks that will make it work on other major browsers.
let names = document.querySelectorAll('.name');
[].forEach.call(names, function(div) {
div.style.color = "blue";
});
We also have an easy method to tackle the browser support issue for you and i am sure you would love it.
We will use the Array.from() method to convert the NodeList to JavaScript array, however it is supported by major browsers only.
let names = document.querySelectorAll('.name');
Array.from(names)The Array.from() static method creates a new, shallow-copied Array instance from an array-like or iterable object.
– MDN
Finally, this tutorial is over i hope you will love it and share it with others.