JavaScript

JavaScript query selector() method – Explained

JavaScript is mainly used to add interactive and dynamic content to static HTML pages, but to add such content it needs to access the HTML elements which are present in the DOM (Document Object Model). JavaScript offers several different methods to access the HTML elements present in the document. Here we will discuss in detail, what is the querySelector() method and how to use it:

What is querySelector() method in JavaScript

Do you want to search for and access any element within the document? The querySelector() is the perfect method you have got for the proposed functionality.

The querySelector() is a method in JavaScript that plays a major role in searching for elements. It is a method from the DOM API that allows us to get or retrieve a single element that matches the parameter being passed.

The querySelector() returns null if no matches are found; However, if there are two matches in the document, it will access only the first occurrence.

Now we will discuss the syntax of the querySelector() method before moving onto the examples to better understand the querySelector() method.

Syntax

element = document.querySelector(selector(s));

The querySelector() method takes only one parameter which specifies one or more selectors; These selectors are used to select the first HTML element based on its type, attribute, or the value of its attribute, etc.

Here we will use different CSS selectors to properly show how the querySelector() method actually works:

The Universal Selector

The asterisk sign (*) is known as the universal selector; it is used to access all the elements of the document:

<h1>Hello!</h1>
<p>Welcome to Linux Hint!</p>

<script>
    document.querySelector("*").style.color = 'red';
</script>

The type/tag selector

We can search for any element by passing the value of its tag to the querySelector() method.

For example, if we want to get the “<p>” tag from the HTML DOM and change its color to red, the code will go like this:

HTML

<h1>Hello!</h1>
<p>Welcome to Linux Hint!</p>

JavaScript

<script>
    document.querySelector("p").style.color = 'red';
</script>

The ID selector

The # sign is used to select an element based on its ID; IDs are supposed to be unique and no two elements on a single HTML page should have the same ID:

For example, to change the color of an HTML element whose ID is “example-id”, the code will look like this:

HTML

<h1 id="example-id">Hello!</h1>
<p>Welcome to Linux Hint!</p>

JavaScript

<script>
    document.querySelector("#example-id").style.color = 'red';
</script>

The Class Selector

The dot “.” sign is the selector for the class attribute which is used to select an element based on its class. Multiple elements can have the same class but the querySelector() method will only return the first element:

For example, to change the background color of an HTML element whose class is “example-class”, the code will look like this:

HTML

<h1>Hello!</h1>
<p class="example-class">Welcome to Linux Hint!</p>

JavaScript

<script>
    document.querySelector(".example-class").style.backgroundColor = 'red';
</script>

Multiple selectors

We can give a combination of multiple selectors the querySelector() method as well, these selectors should be separated by commas. However, it will only access a single element whichever occurs first in the HTML code sequence:

For example, if we mention two HTML tags in the querySelector() method:

<script>
    document.querySelector("h2, p").style.backgroundColor = 'red';
</script>

While our HTML tags are placed in the following sequence

<h1>Hello!</h1>
<p>Welcome to Linux Hint!</p>
<h2>JavaScript querySelector() method - Explained</h2>

The querySelector() method will only return the first match which is <p> tag:

To access multiple elements in JavaScript, the querySelectorAll() method is used:

querySelectorAll() Method in JavaScript

Suppose, we want to change the color of all the <p> tags whose class is “green”. The HTML and JavaScript will go like this:

HTML

<p class="green">Welcome to Linux Hint!</p>
<p>Welcome to Linux Hint!</p>
<p class="green">Welcome to Linux Hint!</p>
<p class="green">Welcome to Linux Hint!</p>
<p>Welcome to Linux Hint!</p>

JavaScript

<script>
    var greenPara = document.querySelectorAll(".green");

    for (let i = 0; i < greenPara.length; i++) {
        greenPara[i].style.backgroundColor = "green";
    }
</script>

Conclusion

The queryselector() method is an efficient way to access HTML elements in DOM. JavaScript provides other methods for accessing DOM elements as well but  queryselector() is the most versatile and offers the most options when it comes to DOM manipulation. From the introduction to the examples, this post has explained and clarified almost every aspect precisely and thoroughly. With the help of examples, it has clearly described the concept of the queryselector() method.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.