The Children Collection

Note : The Children collection is Internet Explorer 4.0 specific. As Netscape doesn't support scripting for every HTML element, it doesn't support the Children collection.

Like the All collection contains a reference to all elements in the document, the Children collection contains a reference to all the elements sub-ordinate to the referenced element, returning null (or a scripting error) if the referenced element has no child elements (the length property should be checked first to avoid this). The children collection is supported by Internet Explorer 4.0 for every HTML element.

For example, from the first paragraph of this topic:

<P ID="P1"><STRONG ID="STRONG1"><EM>Note : </EM></STRONG>The Children collection is <STRONG>Internet Explorer</STRONG> 4.0 specific. As <STRONG>Netscape</STRONG> doesn't support scripting for <EM>every</EM> HTML element, it doesn't support the Children collection.

The <STRONG> element whose ID is STRONG1 would only contain a reference to the following <EM> element in its child collection, while the <P> whose ID is P1 would contain references to all of the elements following it, except the first <EM> element, which is a child of the <STRONG> element only.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the children collection index does. Therefore, the length property may return a value of 5, but to access the 3rd child, you'd need to use object.children(2).property

Methods

item
The item method retrieves single items, or sub-collections from the children collection. It accepts the following arguments:

...children.item(index, sub-index)

If index is a number, then the method returns a reference to the element object at that position in the children collections index. I.e. (using the example above)

strTag=object.children.item(2).tagName

would make strTag be STRONG - the value of the <STRONG> elements tagName property. As you can see, this is effectively the long-hand version of using document.children(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the collection that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used. For example (getting back to the 5 radio buttons example) assume that 5 elements in the children collection all have the NAME attribute set as radColour. To interrogate the 3rd of these elements, you could use:

strThird=object.children('radColour',2).propertyName

tags
The tags method returns a collection of element objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

object.children.tags('EM')

would return a collection of all the <EM> element objects that were children of the referenced element object.