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

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status