This page is Almost Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

children

Summary

Retrieves a live collection of child elements of an element.

Property of dom/Elementdom/Element

Syntax

Note: This property is read-only.

var childElementList = element.children;

Return Value

Returns an object of type DOM NodeDOM Node

A live HTMLCollection of child elements of the element.

Examples

This example shows how to retrieve a collection of input type=text, div and button. The children collection for oChildDIV includes p.

<!doctype html>
<html>
 <head>
  <style>

  </style>
  <script>
/*jslint white: true, sloppy: true, plusplus: true, maxlen: 100*/
var oColl, //Collection for children.
    oRow, oCell, //Use for row and cell.
    oParentDIV, oChildDIV, oTable;
/*****************************************************************************
In:
 oColl - Collection of children.
 oCollection - Parent object.
Out:
 Output to screen.
******************************************************************************/
function getChildren(oColl, oCollection) {
  var x, length = oColl.length;
  for (x = 0; x < length; x++) {
    // Create new row.
    oRow = oTable.insertRow();

    // Create cell with the array index of current child.
    oCell = oRow.insertCell();
    oCell.align = 'center';
    oCell.style.color = '#0000FF';
    oCell.textContent = x;

    // Create cell with the tagName of current child.
    oCell = oRow.insertCell();
    oCell.align = 'center';
    oCell.textContent = oCollection.children[x].tagName;

    // Create cell with ID / name of current child.
    oCell = oRow.insertCell();
    oCell.align = 'center';

    if (oCollection.children[x].name) {
      oCell.textContent = oCollection.children[x].name;
    } else {
      oCell.textContent = oCollection.children[x].id;
    }

    // Create cell with applicable Parent object to the child.
    oCell = oRow.insertCell();
    oCell.align = 'center';
    oCell.textContent = oCollection.id;
  }
}
function collect() {
  oColl = oParentDIV.children;
  // Call function to create cells for the top parent object.
  getChildren(oColl, oParentDIV);
  /* Call function to create cells for the child within the parent object
     containing its own child.*/
  oColl = oChildDIV.children;
  getChildren(oColl, oChildDIV);
}
function b1Click() {
  collect();
  this.disabled = true;
}
function initialize() {
  oParentDIV = document.getElementById("oParentDIV");
  oChildDIV = document.getElementById("oChildDIV");
  oTable = document.getElementById("oTable");
  document.getElementById("b1").addEventListener("click", b1Click, false);
  document.getElementById("b0").addEventListener(
    "click",
    function () {
      console.log('Something.');
    },
    false);
}
window.addEventListener("load", initialize, false);
  </script>
 </head>
 <body>
  <center>
   <span class="oTitle">DIV Object (ID: oParentDIV)</span>
   <div id="oParentDIV" class="oDIV">
    Some Input (non-editable):
    <input type="text" name="SomeInputTextBox"
      value="" size="5" contenteditable="false"/>
    <div id="oChildDIV">
     <p id="oParagraph1">Some text in a paragraph</p>
    </div>
    <button id="b0" name="SomeButton">The Label for the Button</button>
   </div>
   <hr/>
   <button id="b1" style="cursor: pointer;">Retrieve Collection</button>
   <br/><br/>
   <table border="1" id="oTable" alt="Child Listing">
    <tr>
     <th>Array Index</th>
     <th>Child Element</th>
     <th>ID</th>
     <th>Parent Object</th>
    </tr>
   </table>
  </center>
 </body>
</html>

View live example

Usage

 Use this property to get a live collection of the child elements of an element.

Notes

  • Since this is a live collection, its length, as well as its content, will always change whenever child elements are added, removed, or reordered.
  • The objects contained in the children collection are undefined if the child elements are overlapping tags.
  • The children collection can contain HTML elements.

Related specifications

WHATWG DOM
Living Standard
DOM4
Working Draft

Attributions