ParentNode.children

  • Revision slug: Web/API/ParentNode.children
  • Revision title: ParentNode.children
  • Revision id: 453697
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ DomRef("ParentNode") }}

The ParentNode.children read-only property returns a live {{domxref("HTMLCollection")}} of child elements of the given object.

The items in the returned collection 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.).

This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, children moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

Syntax

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

// pEl is an object reference to a <p> element
// So, first we check if the object is not empty, if the object has child elements
if (pEl.children.length) {
    var children = pEl.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
    }
}

Specification

Specification Status Comment
{{SpecName('DOM WHATWG', '#parentnode', 'DocumentFragment')}} {{Spec2('DOM WHATWG')}} Split the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implements it, too.
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}} {{Spec2('Element Traversal')}} Add its initial defintion to the ElementTraversal pure interface and use it on {{domxref("Element")}}.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (on {{domxref("Element")}}) 1.0 {{CompatGeckoDesktop("1.9.1")}} 9.0 [1] 10.0 4.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{CompatUnknown}} {{CompatGeckoDesktop("25.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (on {{domxref("Element")}}) {{ CompatVersionUnknown() }} {{CompatGeckoMobile("1.9.1")}} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{CompatUnknown}} {{CompatGeckoMobile("25.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] Internet Explorer 6, 7 and 8 supported it, but erroneously includes {{domxref("Comment")}} nodes.

See also

  • The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.
  • Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}

Revision Source

<p>{{ DomRef("ParentNode") }}</p>
<p>The <code><strong>ParentNode.children</strong></code> read-only property returns a live {{domxref("HTMLCollection")}} of child elements of the given object.</p>
<p>The items in the returned collection 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>
<div class="note">
  <p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>children</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
</div>
<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2>
<pre class="syntaxbox">
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>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush: js">
// pEl is an object reference to a &lt;p&gt; element
// So, first we check if the object is not empty, if the object has child elements
if (pEl.children.length) {
    var children = pEl.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>
<h2 id="Specification">Specification</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
    <tr>
      <td>{{SpecName('DOM WHATWG', '#parentnode', 'DocumentFragment')}}</td>
      <td>{{Spec2('DOM WHATWG')}}</td>
      <td>Split the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br />
        The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implements it, too.</td>
    </tr>
    <tr>
      <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
      <td>{{Spec2('Element Traversal')}}</td>
      <td>Add its initial defintion to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<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 (on {{domxref("Element")}})</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.9.1")}}</td>
        <td>9.0 [1]</td>
        <td>10.0</td>
        <td>4.0</td>
      </tr>
      <tr>
        <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop("25.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</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 (on {{domxref("Element")}})</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{CompatGeckoMobile("1.9.1")}}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("25.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously includes {{domxref("Comment")}} nodes.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.</li>
  <li>
    <div class="syntaxbox">
      Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}</div>
  </li>
</ul>
Revert to this revision