The NodeIterator interface

DOM Level 2 Traversal module has an important interface called NodeIterator. This object can be used to traverse filtered lists of nodes or elements using a flat logical representation of the document structure.

After the iterator is created, the first node of the list is usually the root of the subtree and nextNode() and previousNode() methods can be used to get the next and previous node (if exist). When the nextNode() method returns a null, traversal can be considered as completed.

Methods of NodeIterator interface

createNodeIterator()

The createNodeIterator() method creates a NodeIterator object.

Syntax for createNodeIterator()

document.createNodeIterator(root, nodeType, filter, entityRefExpansion);

where,

root: Root node where the NodeIterator’s traversal starts.
nodeType: Integer that specifies the types of nodes to show. It is a bitwise OR'd list of Filter specification constants from the NodeFilter DOM interface, indicating which nodes to iterate over. Some of the constants are SHOW_ALL to show all nodes, SHOW_ATTRIBUTE to show attribute nodes, etc.
filter: User defined filter function that can filter nodes. This function as explained earlier returns FILTER_ACCEPT, FILTER_REJECT and FILTER_SKIP to help in filtering nodes.
entityRefExpansion: True here indicates that the contents of EntityReference nodes are visible.

nextNode()

The nextNode() method is used to find the next node relative to the current node in the NodeIterator object. If there is no next node available in the iterator, the null is returned, this can be used to check the end of iterator values in aloop.

previousNode()

The previousNode() method fetches the previous node relative to the current node in the NodeIterator object.

detach()

The detach() method is used to release the NodeIterator object.

Following example code demonstrates the use of NodeIterator. Filter function ‘myFilter’ helps in fetching only buttons. Also note that even though button with id ‘three’ was inside other HTML elements, they were also fetched in a list as we are using NodeIterator which flattens the structure of HTML and fetches all elements.

Example of NodeIterator interface methods and properties

<!DOCTYPE html>
<html>

<head>
<style>
    button {
        background-color:#fff; padding:0.4em 0.5em 0.3em; border:2px groove #444; border-radius:4px;
    }
  	ul {
    	color:#222; font-size:1.2em; font-family:Calibri; 
  		background-color:lightblue; text-shadow:0px 1px 1px #eee; 
  }
</style>
<script>
    function myFilter (node) {
        if (node.tagName.toLowerCase () == 'button') {
            return NodeFilter.FILTER_ACCEPT;
        }
        return NodeFilter.FILTER_SKIP;
    }

    function FindButtons () {
        var cont = document.getElementById ("content");
            
        try {
            var iterator = document.createNodeIterator (cont, NodeFilter.SHOW_ELEMENT, myFilter, false);
            
            var node = iterator.nextNode ();

            while (node) {
                alert ("Buttons being iterated: " + node.innerHTML);
                node = iterator.nextNode ();
            }
        }
        catch (e) {
            alert ("No support for createNodeIterator method!");
        }
    }
</script>
</head>

<body>
    <div id="content">
      	<button id="one">One</button>
      	<button id="two">Two</button>
		<ul>
			<li>Test 1</li>
			<li>Test 2</li>
		</ul>
		<p>
			<button id="three">Three</button>
		</p>
    </div>
    <button onclick="FindButtons ()">Find Buttons (CLICK HERE!)</button>
</body>

</html>

›› go to examples ››

The NodeIterator interface

Methods of NodeIterator interface

createNodeIterator()

Syntax for createNodeIterator()

nextNode()

previousNode()

detach()

Example of NodeIterator interface methods and properties

Comments

About

Contact

Get Connected