Skip to content
Related Articles

Related Articles

Improve Article

What is the difference between children and childNodes in JavaScript?

  • Last Updated : 16 Aug, 2019
  • childNodes:
    The childNodes property is a property of Node in Javascript and is used to return a Nodelist of child nodes. Nodelist items are objects, not strings and they can be accessed using index numbers. The first childNode starts at index 0.

    Syntax

    element.childNodes
  • children
    The children is a property of element which returns the child elements of an element as objects.

    Syntax

    element.children

The main difference between children and childNodes property is that children work upon elements and childNodes on nodes including non-element nodes like text and comment nodes.



Example 1: This example illustrates the property of childNodes.




<!DOCTYPE html>
<html>
  
<body>
    <style>
        p {
            color: green;
        }
    </style>
<center>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>childNodes</h2>
    <button onclick="childNode()">
        Try it
    </button>
  
    <p id="geek"></p>
  
    <script>
        function childNode() {
            //accessing all the child nodes present in our code
            var childNode = 
                document.body.childNodes;
            var string = "";
            var i;
          
            for (i = 0; i < childNode.length; i++) {
                string = string + childNode[i].nodeName + "<br>";
            }
  
            //appending the child nodes to paragraph with id "geek"
            document.getElementById(
            "geek").innerHTML = string;
        }
    </script>
</center>
</body>
  
</html>

Output:
Before:

After:

Example 2: This example illustrates the property of children.




<!DOCTYPE html>
<html>
  
<body>
    <style>
        p {
            color: green;
        }
    </style>
<center>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>children</h2>
      
    <button onclick="myChildren()">
      Try it
  </button>
  
    <p id="geek"></p>
  
    <script>
        function myChildren() {
            var c = document.body.children;
            var string = "";
            var i;
            for (i = 0; i < c.length; i++) {
                string = string + c[i].tagName + "<br>";
            }
  
            document.getElementById(
              "geek").innerHTML = string;
        }
    </script>
</center>
</body>
  
</html>

Output:
Before:

After:

Supported Browsers:

  1. Google Chrome
  2. Mozilla Firefox
  3. Apple Safari
  4. Opera
  5. Internet Explorer/Edge



My Personal Notes arrow_drop_up
Recommended Articles
Page :