In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > objects > children

children collection

Browser support:

	3.5

Represents a collection of all element nodes that are direct descendants of an element.

The elements in the collection are sorted in source code order.

Note: The children collection is supported in Firefox from version 3.5. In earlier versions, you can use the childNodes collection instead. For details, see the example below.

A node is an element node if it's nodeType is 1 (Node.ELEMENT_NODE). Text nodes and comment nodes are not element nodes.

Note: The children collection also contains the child comment nodes in Internet Explorer before version 9. In other browsers, it only contains the element nodes.

The childNodes collection is similar to the children collection, but it contains all direct descendant nodes of an element including text nodes and comment nodes.

Syntax:

Properties that reference the object:

•

object.children

Related HTML objects:

a, abbr, acronym, address, applet, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frameset, h1, h2, h3, h4, h5, h6, head, html, i, img, ins, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp

The base interface, through which you can add new functionalities to the children collection, is the HTMLCollection interface.

Possible members:

Properties:

length

Returns an integer that specifies the number of elements in the current collection.

This property is read-only.

Methods:

[nameOrIndex]

Returns an element or a collection of elements from the current collection by name or index.

Parameters:

nameOrIndex

Required. A string or a zero-based integer that specifies the element or elements to retrieve.

If an integer value is specified, it specifies the index of the element to retrieve.
If this parameter is a string, then it specifies a value for the name or id property of the element or elements to retrieve.

Return value:

If no match is found, it returns undefined.
If exactly one match is found, it returns the matching element.
If more than one match is found, it returns a children sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.

item (nameOrIndex [, subIndex])

Returns an element or a collection of elements from the current collection by name or index.

Parameters:

nameOrIndex

Required. A string or a zero-based integer that specifies the element or elements to retrieve.

If an integer value is specified, it specifies the index of the element to retrieve.
If this parameter is a string, then it specifies a value for the name or id property of the element or elements to retrieve.

subIndex

Optional. Supported by Internet Explorer only. If more than one matching element is found for the index parameter (possible only if it is a string), the item method creates a children sub-collection filled with the matching elements. In that case, the subIndex property specifies the position of the element in the sub-collection to retrieve. In other cases, the subIndex property has no meaning.

Return value:

If no match is found, it returns null in Internet Explorer and Opera, and returns undefined in Google Chrome and Safari.
If exactly one match is found, it returns the matching element.
If more than one match is found, it returns a children sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.

namedItem (name)

Returns an element or a collection of elements from the current collection by name.

Parameters:

name

Required. String that specifies a value for the name or id property of the element or elements to retrieve.

Return value:

If no match is found, it returns null in Internet Explorer and Opera, and returns undefined in Google Chrome and Safari.
If exactly one match is found, it returns the matching element.
If more than one match is found, it returns a children sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.

Example HTML code 1:

This example illustrates the use of the children collection:

<head>
    <script type="text/javascript">
        function GetListItems () {
            var list = document.getElementById ("myList");

            if (list.children) {
                for (var i = 0; i < list.children.length; i++) {
                    var child = list.children[i];
                    alert ("The " + i + ". list item is " + child.innerHTML);
                }
            }
            else {
                for (var i = 0; i < list.childNodes.length; i++) {
                    var child = list.childNodes[i];
                    if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
                        alert ("The " + i + ". list item is " + child.innerHTML);
                    }
                }
            }
        }
    </script>
</head>
<body>
    <ol id="myList">
        <li>Apple</li>
        <li>Peach</li>
        <li>Cherry</li>
    </ol>
    <button onclick="GetListItems ();">Get the list items!</button>
</body>