DOM Node Lists

The NodeList object is the list of nodes retreived from the document.
The browser will return a NodeList object for the property childNodes and method querySelectorAll().

let paraList = document.querySelectorAll("p");

This will return a NodeList which can be accessed using the index number.

Example

<!DOCTYPE html>
<html>
   <body>
      <h2>JavaScript HTML DOM</h2>
      <p>Home</p>
      <p>Product</p>
      <p>About Us</p>
      <p>Contact Us</p>
      <button onclick="changeColor()">Change Color</button>
      <script>
         function changeColor() {
           const myNodelist = document.querySelectorAll("p");
           for (let i = 0; i < myNodelist.length; i++) {
             myNodelist[i].style.color = "blue";
           }
         }
      </script>
   </body>
</html>

The above program will query all the para element and loop throw them and changes its font color to blue.


Most Read