Open In App

HTML DOM querySelectorAll() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The querySelectorAll() method in HTML is used to return a collection of an element’s child elements that match a specified CSS selector(s), as a static NodeList object. The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0. 

Note: If we want to apply CSS property to all the child nodes that match the specified selector, then we can just iterate through all nodes and apply that particular property.

Syntax:  

element.querySelectorAll(selectors)

Selectors are the required field. It specifies one or more CSS selectors to match the element. These selectors are used to select HTML elements based on their id, classes, types, etc. 
In the case of multiple selectors, a comma is used to separate each selector.

Example: In this example, we will use querySelectorAll() method

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>DOM querySelectorAll() Method</title>
    <style>
        #geek {
            border: 1px solid black;
            margin: 5px;
        }
    </style>
</head>
   
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>querySelectorAll() Method</h2>
    <div id="geek">
        <p>This is paragraph 1.</p>
        <p>This is paragraph 2.</p>
    </div>
    <button onclick="myFunction()">Try it</button>
   
    <script>
        function myFunction() {
            let x = document.getElementById("geek")
                    .querySelectorAll("p");
            let i;
            for (i = 0; i < x.length; i++) {
                x[i].style.backgroundColor = "green";
                x[i].style.color = "white";
            }
        }
    </script>
</body>
 
</html>


Output: 

 

Supported Browsers: The browser supported by the querySelectorAll() method are listed below: 

  • Apple Safari 3.1
  • Google Chrome 1.0
  • Edge 12.0
  • Firefox 3.5
  • Opera 10.0
  • Internet Explorer 9.0


Last Updated : 16 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads