Node.contains

  • Revision slug: Web/API/Node.contains
  • Revision title: Node.contains
  • Revision id: 476707
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Updated tags

Revision Content

{{DomRef}}

Summary

Indicates whether a node is a descendant of a given node.

Syntax

node.contains( otherNode ) 
  • node is the node that's being compared.
  • otherNode is the node that's being compared against.

The return value is true if otherNode is a descendant of node, or node itself. Otherwise the return value is false.

Example

This function checks to see if an element is in the page's body. As contains is inclusive and determining if the body contains itself isn't the intention of isInPage this case explicitly returns false.

function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}
  • node is the node we want to check for in the <body>.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("9.0")}} 5.0 {{CompatVersionUnknown}} 5.2.2 [1][2]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatGeckoMobile("9.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Specification

See also

  • {{domxref("Node.hasChildNodes")}}

Revision Source

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Indicates whether a node is a descendant of a given node.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
node.contains( otherNode ) 
</pre>
<ul>
  <li><code>node</code> is the node that's being compared.</li>
  <li><code>otherNode</code> is the node that's being compared against.</li>
</ul>
<p>The return value is <code>true</code> if <code>otherNode</code> is a descendant of <code>node</code>, or <code>node</code> itself. Otherwise the return value is <code>false</code>.</p>
<h2 id="Example" name="Example">Example</h2>
<p>This function checks to see if an element is in the page's body. As <code>contains</code> is inclusive and determining if the body contains itself isn't the intention of <code>isInPage</code> this case explicitly returns <code>false</code>.</p>
<pre class="brush:js">
function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}</pre>
<ul>
  <li><code>node</code> is the node we want to check for in the <code>&lt;body&gt;</code>.</li>
</ul>
<h2 id="Browser_compatibility" name="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</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("9.0")}}</td>
        <td>5.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>5.2.2 <a href="https://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains" title="https://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains">[1]</a><a href="https://github.com/okfn/annotator/blob/master/src/range.coffee#L366" title="https://github.com/okfn/annotator/blob/master/src/range.coffee#L366">[2]</a></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>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("9.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/domcore/#dom-node-contains" title="http://www.w3.org/TR/domcore/#dom-node-contains">DOM Level 4: contains</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{domxref("Node.hasChildNodes")}}</li>
</ul>
Revert to this revision