How To Use HTML DOM QuerySelectorAll Method In JavaScript

admin_img Posted By Bajarangi soft , Posted On 27-09-2020

In Java script we can get the all element in the document with class="example" so that we can change its text color or background color today we discussing about how to use query selector all method in java script

How To Use HTML DOM QuerySelectorAll Method In JavaScript

The querySelectorAll() method returns all elements in the document that matches 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.

Tip: You can use the length property of the NodeList object to determine the number of elements that matches the specified selector, then you can loop through all elements and extract the info you want.


Syntax and Usage 

document.querySelectorAll(CSS selectors)


Parameter Values
CSS selectors   String Required. Specifies one or more CSS selectors to match the element. 
                        These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc.
                        For multiple selectors, separate each selector with a comma.
 

Return Value:   A NodeList object, representing all elements in the document that matches the specified CSS selector(s). The NodeList is a static collection,meaning that changes in the DOM has NO effect in the collection. Throws a SYNTAX_ERR exception if the selector(s) is invalid

Example(1)

<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>

<button onclick="burlywood()">Click it</button>

<script>
    function burlywood() {
        var x, i;
        x = document.querySelectorAll(".example");
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "burlywood";
        }
    }
</script>

In above example when i click the button it will add a background color all elements with class="example".

Example(2)
<p>This is a p element.</p>

<p>This is also a p element.</p>

<button class="btn btn-primary" onclick="darkseagreen()">Click it</button>

<script>
    function darkseagreen() {
        var x = document.querySelectorAll("p");
        x[0].style.backgroundColor = "red";
    }
</script>

In above example when i click on button it will add a background color to the first p element (index 0) in the document

Example(3)
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<p class="example">Another paragraph with class="example".</p>

<button  class="btn btn-primary"   onclick="change_bg()">Click it</button>
<script>
    function chnage_bg() {
        var x = document.querySelectorAll("p.example");
        x[0].style.backgroundColor = "yellow";
    }
</script>

In above example when i click on button it will add a background color to the first p element (index 0) in the document with class="example".

Example(4)
<div class="example">
    A div element with class="example"
</div>

<div class="example">
    Another div element with class="example"
</div>

<p class="example">A p element with class="example"</p>

<button class="btn btn-primary" onclick="count()">Try it</button>

<h2 id="demo"></h2>

<script>
    function count() {
        var x = document.querySelectorAll(".example");
        document.getElementById("demo").innerHTML = x.length;
    }
</script>
 

In above example when i click on button it will find out how many elements with class "example" there are in this document.

Example(5)

<h1>A H1 element</h1>
<h2>A H2 element</h2>
<div>A DIV element</div>
<p>A p element.</p>
<p>A p element with a <span style="color:brown;">span</span> element inside.</p>
<button class="btn btn-primary" onclick="change_color()">Try it</button>
<script>
    function change_color() {
        var x = document.querySelectorAll("h2, div, span");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "green";
        }
    }
</script>


In above example when i click on button it will set the background color of all h2, div and span elements


Complete Code For HTML DOM QuerySelectorAll Method In JavaScript
<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM QuerySelectorAll Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }

</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>HTML DOM QuerySelectorAll Method In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <h2 class="example">A heading with class="example"</h2>
        <p class="example">A paragraph with class="example".</p>
        <h2 id="demo1">This is a p element with id="demo".</h2>
        <h2 id="demo2"></h2>
        <div>
            <h3>H3 element</h3>
            <h4>I am a p element, my parent is a div element.</h4>
        </div>

        <div>
            <h3>H3 element</h3>
            <h4>I am a p element, my parent is also a div element.</h4>
        </div>

        <button class="btn btn-primary" onclick="change_text()">Click it</button><br><br>
        <button class="btn btn-primary"  onclick="burlywood()">Click it</button><br><br>
        <button class="btn btn-primary"  onclick="darkseagreen()">Click it</button><br><br>
        <button class="btn btn-primary"  onclick="div()">Click it</button><br><br>
        <button class="btn btn-primary"  onclick="get_length()">Click it</button><br><br>

    </div>
    <br>
</div>
</body>
</html>
<script>

    function burlywood() {
        var x, i;
        x = document.querySelectorAll(".example");
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "burlywood";
        }
    }


    function darkseagreen() {
        var x = document.querySelectorAll("h4");
        x[0].style.backgroundColor = "darkseagreen";
    }

    function change_text() {
        document.querySelectorAll("#demo").innerHTML = "Hello World!Welcome to Bajarangisoft";
    }

    function div() {
        var x = document.querySelectorAll("div > h4");
        x.style.backgroundColor = "red";
    }

    function get_length() {
        var x = document.querySelectorAll(".example");
        document.getElementById("demo2").innerHTML = x.length;
    }
</script>

 

Related Post