childNodes collection
Represents a collection of all nodes that are direct descendants of an element.
The nodes in the collection are sorted in source code order.
The childNodes collection contains all direct descendant nodes including text nodes and comment nodes.
If you want to iterate through the child nodes of an element, the firstChild, nextSibling, lastChild and previousSibling properties can also be used.
If you only need the child elements of an element (excluding text nodes and comment nodes), use the nodeType property of the nodes in the childNodes collection or use the children collection.
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.
Syntax:
Properties that reference the object:
| • | object.childNodes |
Related objects:
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, xml, xmp
|
The base interface, through which you can add new functionalities to the childNodes collection, is the NodeList interface.
Possible members:
Properties:
|
Returns an integer that specifies the number of nodes in the current collection.
This property is read-only. |
Methods:
| [nameOrIndex] |
Returns a node or a collection of nodes from the current collection by name or index.
Parameters:
Return value:
|
||||||||||||||
| item (nameOrIndex) |
Returns an node or a collection of nodes from the current collection by name or index.
Parameters:
Return value:
|
||||||||||||||
| namedItem (name) |
Returns an element or a collection of elements from the current collection by name.
Parameters:
Return value:
|
||||||||||||||
| tags | Returns a NodeList collection that contains all elements from the current collection with the specified tag name. |
Example HTML code 1:
This example illustrates the use of the childNodes collection:
|
|
||||
<head> <script type="text/javascript"> function GetChildNodes () { var container = document.getElementById ("container"); for (var i = 0; i < container.childNodes.length; i++) { var child = container.childNodes[i]; if (child.nodeType == 3) { alert ("The " + i + ". child is a text node. Contents:\n" + child.data); } else { if (child.nodeType == 1) { alert ("The " + i + ". child is an element node. Contents:\n" + child.innerHTML); } } } } </script> </head> <body> <div id="container"> Some text at the start of the container. <button onclick="GetChildNodes ();">Get the child nodes of the container!</button> Some text at the end of the container. </div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments