JavaScript document.querySelectorAll()

The JavaScript querySelectorAll() method returns all elements with specified CSS selector. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>This is para one</p>
   <p class="redPara">This is para two</p>
   <p>This is para three</p>
   <p>This is para four</p>
   <p class="redPara">This is para five</p>
   
   <script>
      var ec = document.querySelectorAll(".redPara");
      for(var i=0; i<ec.length; i++)
         ec[i].style.color = "red";
   </script>
   
</body>
</html>

Output

This is para one

This is para two

This is para three

This is para four

This is para five

See, all elements with specified class name, that is redPara, was returned. And I've changed the style of all those elements, one by one, using JavaScript.

Note - There are multiple CSS selectors. The details are described in its separate tutorial.

JavaScript querySelectorAll() Syntax

The syntax of querySelectorAll() method in JavaScript, is:

document.querySelectorAll(x)

The x refers to a CSS selector. If no match found, null is returned.

JavaScript Online Test

« Previous Tutorial Next Tutorial »