ParentNode.children

  • Revision slug: DOM/Element.children
  • Revision title: Element.children
  • Revision id: 329053
  • Created:
  • Creator: fryn
  • Is current revision? No
  • Comment

Revision Content

{{ 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 {{ domxref("HTMLCollection") }}. 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 elements
 {
   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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 3.5 9 (IE6-8 incl commend nodes) 10 4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

 

Specification

DOM4 draft: Node interface

{{ languages( {"zh-cn": "zh-cn/DOM/Element.children" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p><code><strong>children </strong></code>returns a <em>collection</em> of child elements of the given element.</p>
<h3 id="Syntax_and_values" 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 {{ domxref("HTMLCollection") }}.&nbsp;The <code>children</code> attribute is read-only.</p>
<h3 id="Example" 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 elements
 {
   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 id="Notes" 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 id="See_also">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>
<h3 id="Browser_compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1</td>
        <td>3.5</td>
        <td>9 (IE6-8 incl commend nodes)</td>
        <td>10</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
<h3 id="Specification">Specification</h3>
<p><a class="external" href="http://dom.spec.whatwg.org/#interface-node">DOM4 draft: Node interface</a></p>
<p>{{ languages( {"zh-cn": "zh-cn/DOM/Element.children" } ) }}</p>
Revert to this revision