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);
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'ParentNode.children' in that specification. |
Living Standard | Initial definition. |
See also
- The
ParentNode
andChildNode
interfaces. -
Object types implementing this interface:
Document
,Element
, andDocumentFragment
. -
Node.childNodes