Javascript Reference - HTML DOM querySelectorAll() Method

The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.

Browser Support


`querySelectorAll`	Yes	9.0	Yes	Yes	Yes

Syntax

document.querySelectorAll(CSS selectors)

Parameter Values

Parameter	Type	Description
CSS selectors	String	Required. CSS selectors to use to match the element.

Return Value

A NodeList object, representing all elements in the document that matches the specified CSS selector(s).

Example

The following code shows how to get all elements in the document with class="example":


<!DOCTYPE html>
<html>
<body>
<h2 class="example">A heading</h2>
<p class="example">A paragraph.</p> 
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from w  w w  .  j a  v  a2 s .c  o  m-->
    var x = document.querySelectorAll(".example");
    x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get all <p> elements in the document, and set the background color of the first <p> element (index 0).


<!DOCTYPE html>
<html>
<body>
<p>This is a p element.</p>
<p>This is also a p element.</p>
<button onclick="myFunction()">test</button>
<!--   w  w  w.  j  a  va  2s. c  o  m-->
<script>
function myFunction() {
    var x = document.querySelectorAll("p");
    x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get all <p> elements in the document with class="example", and set the background of the first <p> element.


<!DOCTYPE html>
<html>
<body>
<h2 class="example">A heading</h2>
<p class="example">A paragraph</p> 
<p class="example">Another paragraph</p> 
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   ww  w .ja  va 2 s  .c o  m-->
    var x = document.querySelectorAll("p.example");
    x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the count of elements with class="example".


<!DOCTYPE html>
<html>
<body>
<div class="example">div</div>
<div class="example">Another div</div>
<p class="example">A p element</p>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from  w  ww.  j a v a  2 s . com-->
    var x = document.querySelectorAll(".example");
    document.getElementById("demo").innerHTML = x.length;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to set the background color of all elements in the document with class="example".


<!DOCTYPE html>
<html>
<head>
<style>
.example {<!--  w  ww. j  a  v a  2 s  .c om-->
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>
<body>
<div class="example">A div</div>
<div class="example">Another div</div>
<p class="example">a p element</p>
<p>This is a <span class="example">span</span> element.</p>
<button class="example" onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.querySelectorAll(".example");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 6

The following code shows how to set the background color of all <p> elements in the document


<!DOCTYPE html>
<html>
<head>
<style>
.example {<!--from w w w .ja  v a 2 s . c  o m-->
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>
<body>
<h1>A h1 element</h1>
<div>A div element</div>
<p>A p element.</p>
<p>Another p element.</p>
<div class="example">
  <p>A p element inside a div element.</p>
</div>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.querySelectorAll("p");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}
</script>

</body>
</html>

The code above is rendered as follows: