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.



Retrieves a live collection of child elements of an element.

Property of dom/Elementdom/Element


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.


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

<!doctype html>

/*jslint white: true, sloppy: true, plusplus: true, maxlen: 100*/
var oColl, //Collection for children.
    oRow, oCell, //Use for row and cell.
    oParentDIV, oChildDIV, oTable;
 oColl - Collection of children.
 oCollection - Parent object.
 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'; = '#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 =;
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() {
  this.disabled = true;
function initialize() {
  oParentDIV = document.getElementById("oParentDIV");
  oChildDIV = document.getElementById("oChildDIV");
  oTable = document.getElementById("oTable");
  document.getElementById("b1").addEventListener("click", b1Click, false);
    function () {
window.addEventListener("load", initialize, false);
   <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>
    <button id="b0" name="SomeButton">The Label for the Button</button>
   <button id="b1" style="cursor: pointer;">Retrieve Collection</button>
   <table border="1" id="oTable" alt="Child Listing">
     <th>Array Index</th>
     <th>Child Element</th>
     <th>Parent Object</th>

View live example


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


  • 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

Living Standard
Working Draft