querySelector, querySelectorAll and forEach By Example
In this post, we will give you information about querySelector, querySelectorAll and forEach By Example. Here we will give you detail about querySelector, querySelectorAll and forEach By Example And how to use it also give you a demo for it if it is necessary.
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><divclass="container"><divclass="row"><divclass="col">.COL 1</div><divclass="col">.COL 2</div><divclass="col">.COL 3</div><divclass="col">.COL 4</div><divclass="col">.COL 5</div></div><divclass="row"><divid="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:
constcols=document.querySelectorAll("div.col");The document.querySelectorAll("div.col") instruction returns a NodeList of the 5 <div > elements on the page.
This is a screenshot of the result on Chrome DevTools:
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:
constexampleDiv=document.querySelector("#exampleDiv");This will return the <div id="exampleDiv">Example DIV</div> element:
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:
Now, how to make sure our code works in all browsers? By simply avoiding looping directly over the return value of the querySelectorAll() method.
constcols=document.querySelectorAll('.col');[].forEach.call(cols,(e)=>{console.log(e);});This is a screenshot of the result on the Chrome DevTools console:
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:
The Array.from() method allows you to create a new Array instance from an array-like (such as arguments and NodeList) or iterable object.
Hope this code and post will help you for implement querySelector, querySelectorAll, and forEach By Example. if you need any help or any feedback give it in the comment section or you have a good idea about this post you can give it comment section. Your comment will help us to help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs