querySelector, querySelectorAll and forEach By Example

querySelector, querySelectorAll and forEach By Example

In this example, we'll quickly learn to use modern APIs such as the DOM querySelector() method and the querySelectorAll() method and how to iterate over a NodeList object using forEach(). We'll also see some techniques used in browsers that don't support iterating over a NodeList using forEach() and how to convert a NodeList to an Array using the Array.from() method.

querySelector and querySelectorAll are DOM APIs available on modern web browsers. They are used to query DOM elements that match a CSS selector. You can select elements by class, ids or names or any complex CSS selectors.

Let's take this simple html example:

<!DOCTYPE html>
<html>
<body>
 <header>
 <h1>
 querySelector & querySelectorAll Example
 </h1>
 </header>
 <div class="container">
 <div class="row">
 <div class="col">.COL 1</div>
 <div class="col">.COL 2</div>
 <div class="col">.COL 3</div>
 <div class="col">.COL 4</div>
 <div class="col">.COL 5</div>
 </div>
 <div class="row">
 <div id="exampleDiv">Example DIV</div>
 </div>
 </div>
 <footer>Copyright 2018</footer>
</body>
</html>

Now before the closing </body> add a <script> tag with the following JavaScript to query <div> elements with .col class:

const cols = document.querySelectorAll("div.col");

The document.querySelectorAll("div.col") instruction returns a NodeList of the 5 <div class="col"> elements on the page.

This is a screenshot of the result on Chrome DevTools:

querySelectorAll Example

A NodeList is a list (collection) of nodes that can be returned by APIs such as Node.childNodes and the document.querySelectorAll() method.

You can also use document.querySelector() to query a single DOM element:

const exampleDiv = document.querySelector("#exampleDiv");

This will return the <div id="exampleDiv">Example DIV</div> element:

querySelector example

Looping Over querySelectorAll NodeList using forEach

In the previous example we've seen that the querySelectorAll() method returns a NodeList not a typical array.

You can use JavaScript' forEach to easily loop over the elements of a typical array but how about a NodeList?

You can use forEach with a NodeList in modern browsers like Chrome and Firefox but not supported in all browsers (Safari, IE and Edge)

cols.forEach(e => { console.log(e); })

cols is a NodeList.

This is a screen shot of the result on Chrome DevTools console:

NodeList forEach

Now, how to make sure our code works in all browsers? By simply avoiding looping directly over the return value of the querySelectorAll() method.

const cols = document.querySelectorAll('.col');

[].forEach.call(cols, (e)=>{
 console.log(e);
});

This is a screen shot of the result on Chrome DevTools console:

NodeList forEach

Another alternative is to use Array.from() method to convert the NodeList object to a JavaScript Array but it's only available on modern browsers.

Array.from(cols);

This is the result:

Array.from & NodeList

The Array.from() method allows you to create a new Array instance from an array-like (such as arguments and NodeList) or iterable object.

References

  • Date: