HTML - DOM Element children Property

Quiz

The HTML DOM Element children property is used to retrieve a collection of its child elements (or HTMLCollection), represented as an HTMLCollection object.

The returned collection does not include text nodes and other non-element nodes.

Syntax

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

element.children;

Parameters

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

Return Value

The property returns an HTMLCollection object that contains a collection of the child elements of the parent element.

Example 1: Retrieving Children of a Div Element

The following is a basic example of the HTML DOM Element children property. It retrieves the child of a <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element children</title>
</head>
<body>
<h3>HTML DOM Element children Property</h3>
<p>It retrieves child elements of the parent ...</p>    
<div id="parent">
   <p>Child 1</p>
   <p>Child 2</p>
   <p>Child 3</p>
</div>
<p id="output"></p>
<script>
   const pE=document.getElementById('parent');
   const children = pE.children;
   // Displaying child elements in the output div
   let res="<p><strong>Child Elements:</strong></p>";
   for (let i = 0; i < children.length; i++) {
      res += `<p>${children[i].textContent}</p>`;
   }
   document.getElementById('output').innerHTML=res;
</script>
</body>
</html>

The above program displays all the child elements of a "div" element.

Example 2: Counting the Number of Children of Div

Here is another example of the HTML DOM Element children property. We use this function to retrieve, the total number of children of a <div> element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element children</title>
</head>
<body>
<h3>HTML DOM Element children Property</h3>
<p>Displays the number of childrens...</p>
<div id="myDIV">
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
   <p>Paragraph 4</p>
</div>
<button onclick="countChildren()">Count Children</button>
<div class="output">
   <p>Number of children:- <span id="Cc"></span></p>
</div>
<script>
   function countChildren() {
       let myDiv = document.getElementById("myDIV");
       let childC = myDiv.children.length;
       document.getElementById("Cc").textContent = childC;
   }
</script>
</body>
</html>

When the button clicks, the total number of children of a "div" element will be displayed.

Example 3: Changing Child Elements' Background Color

In the example below, we use the children property to access and change the background of all child elements within a <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element children</title>
</head>
<body>
<h3>HTML DOM Element children Property</h3>
<p>It Changes background colour for the Children</p> 
<div id="pt">
   <div>Child 1</div>
   <div>Child 2</div>
   <div>Child 3</div>
</div>
<button onclick="changeBackground()">Change children Background</button>
<script>
   function changeBackground() {
      const parentDiv=document.getElementById('pt');
      const children = parentDiv.children;
      for (let i = 0; i < children.length; i++) {
         const child = children[i];
         child.style.backgroundColor = '#ff80f0';  
      }
   }
</script>
</body>
</html>

When the button is clicked the background color of all child of a "div" element will be changed.

Example 4: Text of Third Child Element in Select Box

This example shows how to interact with dropdowns and retrieve specific elements' content based on their index using children properties. It displays the text of the third child element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element children</title>
</head>
<body>
<h3>HTML DOM Element children Property</h3>
<p>Get Text of Third Child Element in Select</p> 
<select id="mySelect">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
</select>
<button onclick="getThirdChild()">Get Text of Third Child</button>
<p id="result"></p>
<script>
   function getThirdChild() {
      const s = document.getElementById('mySelect');  
      const thirdText = s.children[2];
      document.getElementById('result').textContent = 
      `Text of third child element: ${thirdText.innerHTML}`;
   }
</script>
</body>
</html>

Supported Browsers

Property
children	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page