Document.createTreeWalker()

  • Revision slug: Web/API/document.createTreeWalker
  • Revision title: Document.createTreeWalker()
  • Revision id: 461859
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{DomRef("Document")}}

The Document.createTreeWalker() creator method returns a newly created {{domxref("TreeWalker")}} object.

Syntax

treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);

Parameters

root
Is the root {{domxref("Node")}} of this {{domxref("TreeWalker")}} traversal. Typically this will be an element owned by the document.
whatToShow {{optional_inline}}
Is an optionale unsigned long representing a bitmask created by combining the constant properties of NodeFilter. It is a convenient way of filtering for certain types of node. It defaults to 0xFFFFFFFF representing the SHOW_ALL constant.
Constant Numerical value Description
NodeFilter.SHOW_ALL -1 (that is the max value of unsigned long) Shows all nodes.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}} 2 Shows attribute {{ domxref("Attr") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Attr") }} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}} 8 Shows {{ domxref("CDATASection") }} nodes.
NodeFilter.SHOW_COMMENT 128 Shows {{ domxref("Comment") }} nodes.
NodeFilter.SHOW_DOCUMENT 256 Shows {{ domxref("Document") }} nodes.
NodeFilter.SHOW_DOCUMENT_FRAGMENT 1024 Shows {{ domxref("DocumentFragment") }} nodes.
NodeFilter.SHOW_DOCUMENT_TYPE 512 Shows {{ domxref("DocumentType") }} nodes.
NodeFilter.SHOW_ELEMENT 1 Shows {{ domxref("Element") }} nodes.
NodeFilter.SHOW_ENTITY {{deprecated_inline}} 32 Shows {{ domxref("Entity") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Entity") }} node as its root; in this case, it means that the {{ domxref("Entity") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}} 16 Shows {{ domxref("EntityReference") }} nodes.
NodeFilter.SHOW_NOTATION {{deprecated_inline}} 2048 Shows {{ domxref("Notation") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with a {{ domxref("Notation") }} node as its root; in this case, it means that the {{ domxref("Notation") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.
NodeFilter.SHOW_PROCESSING_INSTRUCTION 64 Shows {{ domxref("ProcessingInstruction") }} nodes.
NodeFilter.SHOW_TEXT 4 Shows {{ domxref("Text") }} nodes.
filter {{optional_inline}}
Is an optional {{domxref("NodeFilter")}}, that is an object with a method acceptNode, which is called by the {{domxref("TreeWalker")}} to determine whether or not to accept a node that has passed the whatToShow check. ??? Gecko allows filter to be a function instead of an object.
entityReferenceExpansion {{optional_inline}} {{deprecated_inline}}
is not used by Gecko but the value is saved and returned by the nsIDOMNodeIterator property.

Example

The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the acceptNode() method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
  false
);

var nodeList = [];

while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);

Browser compatibility

Supported by IE9+, FF2+, Chrome 1+, Safari 3+, Opera 9+

Specification

See also

Revision Source

<div>
  {{DomRef("Document")}}</div>
<p>The <strong><code>Document.createTreeWalker()</code></strong> creator method returns a newly created {{domxref("TreeWalker")}} object.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>);
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
  <dt>
    <em>root </em></dt>
  <dd>
    Is the root {{domxref("Node")}} of this {{domxref("TreeWalker")}} traversal. Typically this will be an element owned by the document.</dd>
  <dt>
    <em>whatToShow {{optional_inline}}</em></dt>
  <dd>
    Is an optionale <code>unsigned long</code> representing a bitmask created by combining the constant properties of <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. It is a convenient way of filtering for certain types of node. It defaults to <code>0xFFFFFFFF</code> representing the <code>SHOW_ALL</code> constant.<br />
    <table class="standard-table">
      <tbody>
        <tr>
          <td class="header">Constant</td>
          <td class="header">Numerical value</td>
          <td class="header">Description</td>
        </tr>
        <tr>
          <td><code>NodeFilter.SHOW_ALL</code></td>
          <td><code>-1</code> (that is the max value of <code>unsigned long</code>)</td>
          <td>Shows all nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
          <td><code>2</code></td>
          <td>Shows attribute {{ domxref("Attr") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Attr") }} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
          <td><code>8</code></td>
          <td>Shows {{ domxref("CDATASection") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_COMMENT</code></td>
          <td><code>128</code></td>
          <td>Shows {{ domxref("Comment") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_DOCUMENT</code></td>
          <td><code>256</code></td>
          <td>Shows {{ domxref("Document") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_DOCUMENT_FRAGMENT</code></td>
          <td><code>1024</code></td>
          <td>Shows {{ domxref("DocumentFragment") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_DOCUMENT_TYPE</code></td>
          <td><code>512</code></td>
          <td>Shows {{ domxref("DocumentType") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_ELEMENT</code></td>
          <td><code>1</code></td>
          <td>Shows {{ domxref("Element") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_ENTITY</code> {{deprecated_inline}}</td>
          <td><code>32</code></td>
          <td>Shows {{ domxref("Entity") }}&nbsp;nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Entity") }} node as its root; in this case, it means that the {{ domxref("Entity") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
          <td><code>16</code></td>
          <td>Shows {{ domxref("EntityReference") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code><code>NodeFilter.</code></code>SHOW_NOTATION</code> {{deprecated_inline}}</td>
          <td><code>2048</code></td>
          <td>Shows {{ domxref("Notation") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with a {{ domxref("Notation") }} node as its root; in this case, it means that the {{ domxref("Notation") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_PROCESSING_INSTRUCTION</code></td>
          <td><code>64</code></td>
          <td>Shows {{ domxref("ProcessingInstruction") }}&nbsp;nodes.</td>
        </tr>
        <tr>
          <td><code><code>NodeFilter.</code>SHOW_TEXT</code></td>
          <td><code>4</code></td>
          <td>Shows {{ domxref("Text") }}&nbsp;nodes.</td>
        </tr>
      </tbody>
    </table>
  </dd>
  <dt>
    <em>filter <em>{{optional_inline}}</em></em></dt>
  <dd>
    Is an optional {{domxref("NodeFilter")}}, that is an object with a method <code>acceptNode</code>, which is called by the {{domxref("TreeWalker")}} to determine whether or not to accept a node that has passed the <code>whatToShow</code> check. ??? Gecko allows <code>filter</code> to be a function instead of an object.</dd>
  <dt>
    <em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{deprecated_inline}}</em></dt>
  <dd>
    is not used by Gecko but the value is saved and returned by the <code>nsIDOMNodeIterator</code> property.</dd>
</dl>
<h2 id="Example" name="Example">Example</h2>
<p>The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the <code>acceptNode()</code> method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.</p>
<pre class="brush: js">
var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
  false
);

var nodeList = [];

while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>Supported by IE9+, FF2+, Chrome 1+, Safari 3+, Opera 9+</p>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-TreeWalker">DOM Level 2 Traversal: TreeWalker</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker on MSDN</a></li>
</ul>
Revert to this revision