ParentNode.children

The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.

Syntax

let children = node.children;

Value

An HTMLCollection which is a live, ordered collection of the DOM elements which are children of node. You can access the individual child nodes in the collection by using either the item() method on the collection, or by using JavaScript array-style notation.

If the node has no element children, then children is an empty list with a length of 0.

Example

const foo = document.getElementById('foo');
for (let i = 0; i < foo.children.length; i++) {
  console.log(foo.children[i].tagName);
}

Polyfill

// Overwrites native 'children' prototype.
// Adds Document & DocumentFragment support for IE9 & Safari.
// Returns array instead of HTMLCollection.
;(function(constructor) {
  if (constructor &&
    constructor.prototype &&
    constructor.prototype.children == null) {
    Object.defineProperty(constructor.prototype, 'children', {
      get: function() {
        let i = 0, node, nodes = this.childNodes, children = [];
        while (node = nodes[i++]) {
          if (node.nodeType === 1) {
            children.push(node);
          }
        }
        return children;
      }
    });
  }
})(window.Node || window.Element);

Specification

Browser compatibility

See also

• The ParentNode and ChildNode interfaces.
• Object types implementing this interface: Document, Element, and DocumentFragment.
• Node.childNodes