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


comments powered by Disqus