In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > createTreeWalker (document, XMLDocument)

createTreeWalker method (document, XMLDocument)

Browser support:

9

Creates a TreeWalker object that can be used to navigate through the nodes in a subtree.

Note: The createTreeWalker method is supported in Internet Explorer from version 9.

The TreeWalker object represents the result of the createTreeWalker method as a tree. The members of the TreeWalker object can be used to navigate through the resulting tree. For a detailed description, please see the page for the TreeWalker object.

The createNodeIterator method and the NodeIterator object are similar to the createTreeWalker method and the TreeWalker object. The main difference is that the NodeIterator object represents the result as an ordered list not as a tree.

Syntax:

object.createTreeWalker (rootNode, nodeType, filterFunction, entityRefExpansion);

You can find the related objects in the Supported by objects section below.

Parameters:

rootNode

Reference to a node that will be the root node of the TreeWalker object.

nodeType

Integer that specifies the type of nodes to show. Predefined constants are available for the possible values of this parameter, in the scope of the NodeFilter interface (e.g. NodeFilter.SHOW_ALL).

The value can be any combination of the following integer constants with the bitwise OR operator (the value of a predefined constant appears in parentheses after the constant in hexadecimal form):

SHOW_ALL (0xFFFFFFFF)

Show all nodes.

SHOW_ATTRIBUTE (0x00000002)

Show attribute nodes.

SHOW_CDATA_SECTION (0x00000008)

Show CDATASection nodes.

SHOW_COMMENT (0x00000080)

Show comment nodes.

SHOW_DOCUMENT (0x00000100)

Show document nodes.

SHOW_DOCUMENT_FRAGMENT (0x00000400)

Show DocumentFragment nodes.

SHOW_DOCUMENT_TYPE (0x00000200)

Show DocumentType nodes.

SHOW_ELEMENT (0x00000001)

Show element nodes.

SHOW_ENTITY (0x00000020)

Show Entity nodes.

SHOW_ENTITY_REFERENCE (0x00000010)

Show EntityReference nodes.

SHOW_NOTATION (0x00000800)

Show Notation nodes.

SHOW_PROCESSING_INSTRUCTION (0x00000040)

Show ProcessingInstruction nodes.

SHOW_TEXT (0x00000004)

Show text nodes.

filterFunction

Reference to a user-specified function that can filter nodes. The method gets a node for checking and must return an integer value as a result. Predefined constants are available for the possible results, in the scope of the NodeFilter interface (e.g. NodeFilter.FILTER_ACCEPT).

The result can be one of the following values (the value of a predefined constant appears in parentheses after the constant):

FILTER_ACCEPT (1): Accept the node.
FILTER_REJECT (2): Reject the node. The children of this node will be rejected too.
FILTER_SKIP (3): Skip the node.

entityRefExpansion

Boolean that indicates whether the contents of EntityReference nodes are visible for the TreeWalker object.

One of the following values:

false

The contents of EntityReference nodes are hidden.

true

The contents of EntityReference nodes are visible.

Return value:

Returns the newly created TreeWalker object.

Example HTML code 1:

This example illustrates the use of the createTreeWalker method:

<head>
    <script type="text/javascript">
        function ElementChecker (node) {
            if (node.tagName.toLowerCase () == 'button') {
                return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_SKIP;
        }

        function FindFirstButton () {
            if (document.createTreeWalker) {
                walker = document.createTreeWalker (document, NodeFilter.SHOW_ELEMENT, ElementChecker, false);

                    // get the first matching node
                var button = walker.firstChild ();
                
                alert ("The label of the first button element:\n" + button.textContent);
            }
            else {
                alert ("Your browser does not support the createTreeWalker method!");
            }
        }
    </script>
</head>
<body>
    <button onclick="FindFirstButton ()">Find the first button tag with the TreeWalker object</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to iterate through span elements with the TreeWalker object:

<head>
    <script type="text/javascript">
        function ElementChecker (node) {
            if (node.tagName.toLowerCase () == 'span') {
                return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_SKIP;
        }

        function FindMainSections () {
            var contElem = document.getElementById ("content");
            if (document.createTreeWalker) {
                walker = document.createTreeWalker (contElem, NodeFilter.SHOW_ELEMENT, ElementChecker, false);

                    // get the first matching node
                var node = walker.firstChild ();
                
                while (node) {
                    alert ("The contents of the section:\n " + node.innerHTML);
                    node = walker.nextSibling ();
                }
            }
            else {
                alert ("Your browser does not support the createTreeWalker method!");
            }
        }
    </script>
</head>
<body>
    <div id="content">
        <span>
            <b>1. Section</b><br />
            <span>
                <b>1.1. Subsection</b><br />
            </span>
        </span>
        <span>
            <b>2.Section</b><br />
        </span>
    </div>

    <br /><br />
    <button onclick="FindMainSections ()">Find the main sections with the TreeWalker object</button>
</body>