Posted By
Bajarangi soft ,
Posted On 27-09-2020
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)
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>
<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>
<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
<!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>