ParentNode.children

  • Revision slug: DOM/Element.children
  • Revision title: Element.children
  • Revision id: 24846
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ gecko_minversion_header("1.9.1") }}

{{ DomRef() }}

Summary

children returns a collection of child elements of the given element.

Syntax and values

var elList = elementNodeReference.children; 

elList is an ordered collection of element objects that are children of the current element. If the element has no children, then elList contains no elements.

The elList is a variable storing the node list of children. Such list is of type NodeList. The children attribute is read-only.

Example

// parg is an object reference to a <p> element
if (parg.childElementCount())
// So, first we check if the object is not empty, if the object has child nodes
 {
   var children = parg.children;
   for (var i = 0; i < children.length; i++) 
   {
   // do something with each child element as children[i]
   // NOTE: List is live, Adding or removing children will change the list
   };
 };

Notes

The items in the collection of elements are objects and not strings. To get data from those node objects, you must use their properties (e.g. elementNodeReference.children[1].nodeName to get the name, etc.).

See also

Revision Source

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p><code><strong>children </strong></code>returns a <em>collection</em> of child elements of the given element.</p>
<h3 name="Syntax_and_values">Syntax and values</h3>
<pre class="eval">var <em>elList</em> = elementNodeReference.children; 
</pre>
<p><var>elList</var> is an ordered collection of element objects that are children of the current element. If the element has no children, then <var>elList</var> contains no elements.</p>
<p>The <var>elList</var> is a variable storing the node list of children. Such list is of type <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">NodeList</a>. The <code>children</code> attribute is read-only.</p>
<h3 name="Example">Example</h3>
<pre>// parg is an object reference to a &lt;p&gt; element
if (parg.childElementCount())
// So, first we check if the object is not empty, if the object has child nodes
 {
   var children = parg.children;
   for (var i = 0; i &lt; children.length; i++) 
   {
   // do something with each child element as children[i]
   // NOTE: List is live, Adding or removing children will change the list
   };
 };
</pre>
<h3 name="Notes">Notes</h3>
<p>The items in the collection of elements are objects and not strings. To get data from those node objects, you must use their properties (e.g. <code>elementNodeReference.children[1].nodeName</code> to get the name, etc.).</p>
<h3>See also</h3>
<ul> <li><a class="internal" href="/En/DOM/Element.childElementCount" title="En/DOM/Element.childElementCount"><code>childElementCount</code></a> </li> <li><a class="internal" href="/En/DOM/Element.firstElementChild" title="En/DOM/Element.firstElementChild"><code>firstElementChild</code></a></li> <li><a class="internal" href="/En/DOM/Element.lastElementChild" title="En/DOM/Element.lastElementChild"><code>lastElementChild</code></a></li> <li><a class="internal" href="/En/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling"><code>nextElementSibling</code></a> </li> <li><a class="internal" href="/En/DOM/Element.previousElementSibling" title="En/DOM/Element.previousElementSibling"><code>previousElementSibling</code></a></li>
</ul>
Revert to this revision