<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" >The Label for
the Button</BUTTON>
</DIV>
<HR>
<BUTTON id="b1"
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>