Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM querySelector() Method

  • Difficulty Level : Medium
  • Last Updated : 20 Nov, 2021

The querySelector() method in HTML is used to return the first element that matches a specified CSS selector(s) in the document.

Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method.

Syntax:

element.querySelector(selectors);

Selectors are the required field. It Specifies one or more CSS selectors to match the element. These selectors are used to select HTML elements based on their id, classes, types, etc. In the case of multiple selectors, a comma is used to separate each selector. The element which occurs first in the document is the returned element. If the selector matches an id( which should be unique on each page), which is used several times in the document then it will return the first matching element.

Return value :- This method  is used to return the first element that matches a specified CSS selector(s) in the document.

Example: This example describes the use of the DOM querySelector() method to select the very first matching element for the specific selector.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM querySelector() Method</title>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>querySelector() Method</h2>
    <div id="gfg">
         
<p>This is paragraph 1.</p>
 
         
<p>This is paragraph 2.</p>
 
    </div>
    <button onclick="myFunction()">Try it</button>
    <script>
    function myFunction() {
        var x = document.getElementById("gfg");
        x.querySelector("p").style.backgroundColor = "Green";
        x.querySelector("p").style.color = "white";
    }
    </script>
</body>
 
</html>

Output:

DOM querySelector() Method

Supported Browsers: The browser supported by querySelector() method are listed below:

  • Google Chrome 4.0
  • Internet Explorer 8.0
  • Microsoft Edge
  • Firefox 3.5
  • Opera 10.0
  • Safari 3.2
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!