children Collection | Internet Development Index |
Retrieves a collection of DHTML Objects that are direct descendants of the object.
Syntax
[ oColl = ] object.children [ oObject = ] object.children(vIndex [, iSubIndex])
Possible Values
oColl Array containing the direct descendants of an object. oObject Reference to an individual item in the array of elements contained by the object. vIndex Required. Integer or string that specifies the element or collection to retrieve. If this parameter is an integer, the method returns the element in the collection at the given position, where the first element has value 0, the second has 1, and so on. If this parameter is a string and there is more than one element with the name or id property equal to the string, the method returns a collection of matching elements. iSubIndex Optional. Position of an element to retrieve. This parameter is used when vIndex is a string. The method uses the string to construct a collection of all elements that have a name or id property equal to the string, and then retrieves from this collection the element at the position specified by iSubIndex.
Members Table
Property Description length Sets or retrieves the number of objects in a collection.
Method Description item Retrieves an object from the childNodes or children collection. tags Retrieves a collection of objects that have the specified HTML tag name. urns Retrieves a collection of all objects to which a specified behavior is attached.
Remarks
Similar to the objects contained in the all collection, the objects contained in the children collection are undefined if the child elements are overlapping tags.
The children collection can contain HTML elements.
Example
This example shows how to retrieve a collection of DHTML Objects using script. The children collection for oParentDIV includes input type=text, div and button. The children collection for oChildDIV includes p.
<HTML> <HEAD> ... <SCRIPT> var oColl; //Collection for children. var oRow, oCell; //Use for row and cell. function fnCollection(){ oColl = oParentDIV.children; //Call function to create cells for the top parent object. getChildren(oColl, oParentDIV); /*Call function to create cells for the child within the parent object containing its own child.*/ oColl = oChildDIV.children; getChildren(oColl, oChildDIV); } /***************************************************************************** In: oColl - Collection of children. oCollection - Parent object. Out: Output to screen. ******************************************************************************/ function getChildren(oColl, oCollection){ for(x=0;x<oColl.length;x++){ //Create new row. oRow = oTable.insertRow(); //Create cell with the array index of current child. oCell = oRow.insertCell(); oCell.align = 'center'; oCell.style.color = '#0000FF'; oCell.innerText = x; //Create cell with the tagName of current child. oCell = oRow.insertCell(); oCell.align = 'center'; oCell.innerText = oCollection.children.item(x).tagName; //Create cell with ID / name of current child. oCell = oRow.insertCell(); oCell.align = 'center'; if(oCollection.children.item(x).name != null){ oCell.innerText = oCollection.children.item(x).name; }else{ oCell.innerText = oCollection.children.item(x).id; } //Create cell with applicable Parent object to the child. oCell = oRow.insertCell(); oCell.align = 'center'; oCell.innerText = oCollection.id; } } </SCRIPT> </HEAD> <BODY> <CENTER> <SPAN class="oTitle">DIV Object (ID: oParentDIV)</SPAN> <DIV id="oParentDIV" class="oDIV"> Some Input (non-editable): <INPUT type="text" name="SomeInputTextBox" value="" size="5" CONTENTEDITABLE="false"> <DIV id="oChildDIV"> <P id="oParagraph1">Some text in a paragraph</P> </DIV> <BUTTON name="SomeButton" onclick="alert('Some alert.');">The Label for the Button</BUTTON> </DIV> <HR> <BUTTON id="b1" onclick="fnCollection(); b1.disabled=true;" style="cursor:hand">Retrieve Collection</BUTTON> <BR><BR> <TABLE border="1" id="oTable" alt="Child Listing"> <TR> <TH>Array Index</TH><TH>Child Element</TH><TH>ID</TH><TH>Parent Object</TH> </TR> </TABLE> </CENTER> </BODY> </HTML>This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
There is no public standard that applies to this collection.
Applies To
A, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HEAD, hn, HR, HTML, I, IFRAME, IMG, INS, KBD, LABEL, LEGEND, LI, LINK, LISTING, MAP, MARQUEE, MENU, nextID, OL, OPTION, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, THEAD, TITLE, TR, TT, U, UL, VAR, XMP