all
alt
ch
dir
id
min
rel
top
url
URL
urn
Expand Minimize

children attribute | children property

Retrieves a collection of DHTML Objects that are direct descendants of the object.

Syntax

HTML<element children="p" ... >
JavaScript

p = object.children

Property values

Type: Object

Array containing the direct descendants of an object.

Standards information

There are no standards that apply here.

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.

Examples

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.


<!doctype html>
<html>
<head>

<script type="text/javascript">
  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>

<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="console.log('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>

</body>
</html>


 

 

Show:
© 2014 Microsoft