6 out of 13 rated this helpful - Rate this topic

children Collection

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

The following table lists the members exposed by the children object.

Attributes/Properties

Property Description
constructor Returns a reference to the constructor of an object.
length Gets or sets the number of objects in a collection.

Methods

Method Description
item Retrieves an object from various collections, including the all 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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/collections/children.htm

Standards Information

There is no public standard that applies to this collection.

Applies To

A, ABBR, 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, Element Constructor
Did you find this helpful?
(1500 characters remaining)

Community Additions

© 2013 Microsoft. All rights reserved.