HTML DOM childrenProperty

元素对象参考手册Element Object

Example

Get the collection of child elements of the body element:

var c = document.body.children;

Try it Yourself »

Definition and Usage

The children property returns a collection of the child elements of an element, which is an HTMLCollection object.

Tip:Sorted by the order in which the child elements appear in the element. Use the length property of the HTMLCollection object to get the number of child elements, then use the index (starting at 0) to access each child element.

The children property andchildNodesthe difference between the properties:

  • The childNodes property returns all nodes, including text nodes and comment nodes;
  • The children property only returns element nodes;

Browser Support

Property
children 2.0 9.0* 3.5 4.0 10.0

Note: IE6 to IE8 fully support the children property, but it returns element nodes and comment nodes; IE9 and above only return element nodes.

Syntax

element.children

Technical Details

Return value: An HTMLCollection object, representing a collection of element nodes. The order of the elements in the collection is their order in the source code.
DOM Version DOM 1

More Examples

Example

Check how many child elements a div has:

var c = document.getElementById("myDIV").children.length;

Try it Yourself »

Example

Modify the background color of the second child element of a div element:

var c = document.getElementById("myDIV").children; c[1].style.backgroundColor = "yellow";

Try it Yourself »

Example

Get the text of the third (index 2) child element in a select element:

var c = document.getElementById("mySelect").children; document.getElementById("demo").innerHTML = c[2].text;

Try it Yourself »

Example

Modify the background color of all child elements of the body element:

var c = document.body.children; var i; for (i = 0; i < c.length; i++) { c[i].style.backgroundColor = "red"; }

Try it Yourself »

元素对象参考手册Element Object

Other Extensions