HTML - DOM Element childNodes Property

Quiz

The HTML DOM Element childNodes property is used to retrieve the NodeList which contains all child nodes of a parent node (element). The NodeList is an interface that represents a collection of nodes in DOM.

The returned NodeList includes elements, text nodes, and comments. This is read-only property commonly used for the content manipulation in the DOM.

Unlike childElementCount, it covers all types of child nodes.

Syntax

Following is the syntax of the HTML DOM Element childNodes property −

element.childNodes;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a NodeList that contains all child nodes of the specified element.

Example 1: Retrieving NodeList

The following is the basic example of the HTML DOM Element childNodes property. It displays the nodeList in the output −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element childNodes</title>
</head>
<body>
<h3>HTML DOM Element ChildNodes Property</h3> 
<p>It displays the NodeList</p>
<div id="parent">
   <p>This is the first paragraph inside div.</p>
</div>
<button onclick="displayChildNodes()">Display NodeList</button>
<p id="output"></p>
<script>
   function displayChildNodes() {
     const parent = document.getElementById('parent');
     const childNodes = parent.childNodes;
     document.getElementById('output').innerHTML = childNodes;
   }
</script>
</body>
</html>

The above program displays the "nodeList".

Example 2: Displaying the Child Node Count

The following example shows the usage of the childNodes property by displaying the total number of child nodes within the parent node −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element childNodes</title>
</head>
<body>
<h3>HTML DOM Element ChildNodes Property</h3>
<div id="parent">
   <p>This is a parent paragraph.</p>
   <div>
      <p>This is a nested paragraph.</p>
      <span>This is a nested span element.</span>
   </div>
</div><br>
<button onclick="countChildNodes()">Count Child Nodes</button>
<p id="output"></p>
<script>
   function countChildNodes() {
      const count = 
	  document.getElementById('parent').querySelectorAll('*').length;
      document.getElementById('output').textContent = 
	  `Number of child elements: ${count}`;
   }
</script>  
</body>
</html>

When the button clicks, the total number of child nodes within the parent "div" will be displayed as "4".

Example 3: Modifying the Child Nodes

Here is another example of the childNodes property. We use this method to access and modify the child nodes by removing and adding a new one −

<!DOCTYPE html>
<html lang="en">
<head>  
<title>HTML DOM Element childNodes</title>
</head> 
<body>
<h3>HTML DOM Element childNodes property</h3>
<p>Click the button to modify child nodes.</p>
<div id="parent">
   <p>This is a paragraph.</p>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
   </ul>
   <span>Another child</span>
</div>
<button onclick="modifyChildNodes()">Modify Child Nodes</button>
<script>
   function modifyChildNodes() {
      const parentElement = document.getElementById('parent');
      const firstChild = parentElement.childNodes[0];  
      parentElement.removeChild(firstChild); 
      const newElement = document.createElement('h2');
      newElement.textContent = 'New Heading';
      parentElement.appendChild(newElement); 
   }
</script>
</body>
</html>

The above program modifies the child nodes by adding "h2" and removing the "p" element within the parent node.

Example 4: Accessing Child Nodes

In the example below, we use this property to access the child node and display the information about child nodes within the parent node −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element childNodes</title>
</head>
<body>
<h3>HTML DOM Element ChildNodes Property</h3> 
<p>It displays the parent node's child nodes</p>
<p>Whitespace between elements are text nodes.</p>
<div id="parent">
   <p>This is the first paragraph.</p>
   <p>This is the second paragraph.</p>
   <span>This is a span element.</span>
</div><br>
<button onclick="displayChildNodes()">Display Child Nodes</button>
<p id="output"></p>
<script>
   function displayChildNodes() {
     const parent = document.getElementById('parent');
     const childNodes = parent.childNodes;
     let res = "<p><strong>Child Nodes:</strong></p>";
     childNodes.forEach(node => {
         res+=`<p>${node.nodeName}-${node.nodeType}</p>`;
     });
     document.getElementById('output').innerHTML =res;
   }
</script>
</body>
</html>

The above program accesses the child nodes within the "div" element and displays the information about accessed child nodes.

Supported Browsers

Property
childNodes	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page