The **`querySelector()` method** returns the first element that matches a specified CSS selector (such as *ID*, *class name*, or *type*) in a document. If multiple elements have the same selector, then *only* the first one is returned.

Consider the following code snippet,​ which demonstrates the usage of the `querySelector()` method:

<html>
 <head>
 </head>
 <body>
  <h1 class = "one"> Educative </h1>
  <h1 class = "one"> Google </h1>
  <h1 class = "two"> Facebook </h1>

  <p> Click the button to change the color of the 
    first element in the document with class="one". 
    There are two elements with class="one", however, only
    the first one will be affected by query selector. </p> 

  <button onclick="clickMe()">Click Me</button>

  <script>
  function clickMe() {
    document.querySelector(".one").style.color = "red";
  }
  </script>

 </body>
</html>

codemirror

The HTML document.querySelector() method

The querySelector() method returns the first element that matches a specified CSS selector (such as ID, class name, or type) in a document. If multiple elements have the same selector, then only the first one is returned. Consider the following code snippet,​ which demonstrates the usage of the querySelector() method: 