childNodes (W3C DOM Core property)
| Version | Depr. | Static | Read-only |
|---|---|---|---|
| DOM1 | No | No | Yes |
| IE5.5+ | FF1.5+ | SA1.3+ | OP9+ |
|---|---|---|---|
| Full | Full | Buggy | Full |
Example
var kids = node.childNodes;In the example above, kids will be a collection of all the direct child nodes of node. If node has no child nodes then kids will be an empty collection (with zero length). The returned collection is live, which means that changes to the HTML it represents are immediately reflected in the collection, without having to retrieve it again.
So if we say that node is
actually an HTML ul element, like this:
<ul> <li>Mostly set in 1955 <em>(Part 1)</em></li> <li>Mostly set in 2015 <em>(Part 2)</em></li> <li>Mostly set in 1885 <em>(Part 3)</em></li> </ul>
Each of those li elements is a
child node of the ul, and will be included in its
childNodes collection, numbered
0 to 2. The em
elements will not be in that collection, because they're not direct child
nodes of the list (they are descendents, not
children).
Actually this example is idealized, and in some browsers there may
in fact be additional nodes in the childNodes
collection; that's because some browsers count intermediate whitespace
as text nodes, and would therefore consider each piece of
whitespace between the structural nodes to be a text
node.
For more about this behavior please see DOM Core.
In situations where a browser doesn't implement a
particular node interface, these nodes will of course not be included (for
example, Safari 1.3 and 2 in HTML mode1, cannot
see Comment nodes).
Description
The
childNodes collection is an ordered list
of all the direct child nodes of this node; if there are no child nodes
then this collection is empty (it has zero length). The
childNodes collection is a NodeList, in which the items are indexed numerically, and
appear in source order.
As with all node lists,
childNodes is a live
collection, which means that changes to the collection it represents are
immediately reflected in the node list (as opposed to it being a static
snapshot).
Attributes of an element are not considered child nodes,
and therefore don't appear in the childNodes
collection2
This collection is readonly.
Even though a collection looks like an array, it isn't an array —
although you can iterate through it and refer to its members like an
array, you can't use Array methods like
push or pop on it.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.5 | 2.0 | 3.0 | 1.3 | 2.0 | 3.0 | 9.0 | 9.5 |
| Full | Full | Full | Full | Full | Full | Buggy | Buggy | Buggy | Full | Full |
In Opera, Safari and Internet Explorer, this collection is implemented such that it can also be called as a function; so in those browsers both of these statements are equivalent:
node.childNodes[0];
node.childNodes(0);Internet Explorer did this first, and the others have followed, presumably for the sake of de-facto compatibility.
However in Safari's implementation,
childNodes is literally a
function, whereas in the other browsers it's an
object; this means that testing it with a
typeof discriminator will give different
results.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.