HTML DOM querySelectorAll() Method

The querySelectorAll() method returns a collection of an element's child elements that match a specified CSS selector(s), as a static NodeList object. The nodes at Nodelist can be accessed by index numbers. The syntax is as follows :
  element.querySelectorAll(CSS Selector)
Example :
<html>
<body>
  <p class="para">This is Paragraph One</p>
  <p class="para">This is Paragraph Two</p>
  <p class="para">This is Paragraph Three</p>
  <div class="para">This is the text inside the DIV</div>
  <button onclick="func()">Click Here</button>
  <div id="div1"></div>
  <script>
    function func() {
      var elem = document.querySelectorAll('.para');
      var text = "Number of Elements with class '<b>.para</b>' : " + elem.length;
      text += "<br/>The innerText of elements are : <br/>";
      for(var x = 0; x < elem.length; x++) {
        text += document.querySelectorAll('.para')[x].innerText + "<br/>";
      }
      document.getElementById('div1').innerHTML = text;
    }
  </script>
</body>
</html>
Output :

This is Paragraph One
This is Paragraph Two
This is Paragraph Three
This is the text inside the DIV




Next Topic :