Skip to content
Related Articles

Related Articles

HTML | DOM querySelector() Method
  • Last Updated : 15 Mar, 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 first element that match the specified selectors. To return all the matches, use 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 case of multiple selectors, a comma is used to separate each selector. The element which occurs first in the document is the returned element. 
Example: 
 

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="myDIV">
             
<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("myDIV");
          x.querySelector("p").style.backgroundColor = "Green";
          x.querySelector("p").style.color = "white";
        }
        </script>
    </body>
</html>

Output: 
 

After click on the button: 
 



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

  • Google Chrome 4.0
  • Internet Explorer 8.0
  • Firefox 3.5
  • Opera 10.0
  • Safari 3.2

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :