JavaScript

How to find HTML Elements by CSS Selectors

In your JavaScript program, you may need to find HTML elements by CSS selectors to apply any changes to them. The JavaScript methods that can help you in this regard are “querySelector()” and “querySelectorAll()” methods.

This write-up will discuss the procedures to find the HTML Elements by CSS Selectors. Moreover, we will also explain the usage of querySelector() and querySelectorAll() methods for finding out the elements by CSS Selectors, with the help of examples. So, let’s start!

querySelector() method to find elements by CSS Selectors

The Element Interface has a “querySelector()” method, which can be utilized for finding elements by CSS selectors. The querySelector() method will return a “null” value If no matching element is found. This method uses the “depth-first pre-order” traversal method to traverse the document’s nodes.

Syntax

element = document.querySelector(selectors);

The querySelector() method takes “selectors” as an argument which is a DOM string comprising one or more valid CSS selectors.

How to use the querySelector() method to find elements by CSS Selectors

Now, we will show the procedure to find our elements by CSS selectors using the querySelector() method.

Example 1: Using the querySelector() method to find elements by CSS Selectors

In the first example, the querySelector() method will find out the first <p> element in with class=“tutorial” and sets its background color to “yellow”:

!DOCTYPE html>

<html>

<body>

<h1>Finding HTML Elements by CSS Selector</h1>

<h2>The querySelector() Method</h2>

<p>This is linuxhint.com="tutorial"</p>

<h2 class="tutorial">The main heading</h2>

<p class="tutorial">First paragraph.</p>

<script>

document.querySelector("p.tutorial").style.backgroundColor = "yellow";

</script>

</body>

</html>

Execute the above-given program in any code editor or online coding sandbox, however, we will utilize the JSBin for this purpose:

As you can see the background of the first “<p>” element is changed to “yellow”:

Example 2: Using the querySelector() method to find elements by CSS Selectors

The below-given program will change the text element with id=“sample”:

<!DOCTYPE html>

<html>

<body>

<h1>Finding elements by CSS selectors</h1>

<h2>The querySelector() Method</h2>

<p>We will change the text element with id="sample":</p>

<p id="sample">This is a p element having the id="sample".</p>

<script>

document.querySelector("#sample").innerHTML = "linuxhint.com";

</script>

</body>

</html>

Executing the above-given code will show you the following output:

Example 3: Using the querySelector() method to find elements by CSS Selectors

In the third example, we will use the “querySelector()” method for finding the first <p> element with the <div> parent and then change its background color to “yellow”:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid blue;

margin-bottom: 15px;

}

</style>

</head>

<body>

<div>

<h4>First element</h4>

<p>I am the first p element and the div element is my parent</p>

</div>

<div>

<h4>Second element</h4>

<p>I am the second p element and the div is element is my parent.</p>

</div>

<p>Click on the below given button for changing the background color of the first p element</p>

<button onclick="myFunction()">Change Color</button>

<script>

function myFunction() {

var x = document.querySelector("div > p");

x.style.backgroundColor = "yellow";

}

</script>

</body>

</html>

Click on the “Change Color” button to change the background color of the first <p> element:

querySelectorAll() to find elements by CSS Selectors

In HTML, the querySelectorAll() method returns a static NodeList object that comprises a collection of the child elements of an element matched with the specified CSS selectors. Index numbers are used to find out the nodes, starting at 0.

Syntax

element.querySelectorAll(selectors)

The querySelectorAll() method takes “selectors” as an argument, which is a DOM string that comprises one or more valid CSS selectors.

Example 1: Using querySelectorAll() method to find elements by CSS Selectors

In the first example, we will use the querySelectorAll() method to find all <p> elements in the document. After doing so, it will set the “background color” of the first <p> element to “pink”:

<!DOCTYPE html>

<html>

<body>

<h2 class="tutorial">Main heading with class="tutorial"</h2>

<p class="tutorial">First paragraph with class="tutorial".</p>

<p class="tutorial">Second paragraph with class="tutorial".</p>

<p>Change the background color of the first p element with class="tutorial"</p>

<button onclick="myFunction()">Change Color</button>

<p><strong>Note: We are learning how to find elements by CSS selectors</p>

<script>

function myFunction() {

var x = document.querySelectorAll("p.tutorial");

x[0].style.backgroundColor = "pink";

}

</script>

</body>

</html>

As you can see, the background of the first <p> element is changed to “pink”:

Example 2: Using querySelectorAll() method to find elements by CSS Selectors

Now, we will write a JavaScript program to find out the total number of elements with the “tutorial” class by utilizing the “length” property of the NodeList object:

<html>

<body>

<div class="tutorial">

The first div element with class="tutorial"

</div>

<div class="tutorial">

Second div element with class="tutorial"

</div>

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

<p>Click on the following button to find out how number of elements with class "tutorial"</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>

function myFunction() {

var a = document.querySelectorAll(".tutorial");

document.getElementById("demo").innerHTML = a.length;

}

</script>

</body>

</html>

Now, the output will show you a “Click me” button; click on it to check the number of elements with class=“tutorial”:

Example 3: Using querySelectorAll() method to find elements by CSS Selectors

In the following example, we will use the querySelectorAll() method to find “h2”, “div”, and “span” elements. After finding the specified elements, we will change their background color to “red”:

<h1>The main element</h1>

<h2>The second h2 element</h2>

<div>A DIV element</div>

<p>A p element.</p>

<p>A p element having <span style="color:blue;">span</span> element</p>

<p>Click on the following button to set the background color of all h2, div and span elements.</p>

<button onclick="myFunction()">Change color</button>

<script>

function myFunction() {

var x = document.querySelectorAll("h2, div, span");

var i;

for (i = 0; i < x.length; i++) {

x[i].style.backgroundColor = "red";

}

}

</script>

</body>

</html>

Clicking on the highlighted button will change the background color of the h2, div, and span elements:

Conclusion

Using the querySelector() and querySelectorAll() methods, you can find out the elements by CSS selectors. The querySelector() element interface method returns a NodeList with the first matched element. In contrast, the querySelectorAll() method returns a static NodeList object with the child elements matched with the specified CSS selectors. This write-up discussed the procedure to find the HTML Elements by CSS Selectors. We also explained the usage of querySelector() and querySelectorAll() methods for finding out the elements by CSS Selectors.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.