In this section, we will learn what the querySelectorAll() method is and how to use it in JavaScript.

What is Element querySelectorAll() Method in JavaScript?

The JavaScript Element querySelectorAll() method is used to get a reference to the entire children of an element that matches a CSS Selector.

For example, if you have a list and want to get a reference to those items with the class attribute and the value of “odd”, then you can simply use the querySelectorAll() method.

JavaScript querySelectorAll() Method Syntax:

element.querySelectorAll(“CSS-Selector”);

JavaScript querySelectorAll() Method Parameter

The method takes one argument and that is a CSS-selector query.

JavaScript querySelectorAll() Method Return Value

The return value of this method is a collection object that contains those child elements that matched the CSS Selector that we’ve set as the argument of this method.

Example: using querySelectorAll() method in JavaScript

See the Pen using querySelectorAll() method in JavaScript by Omid Dehghan (@odchan1) on CodePen.