treewalker-vs-dom-traversal-for-loop

Benchmark created by brentm on January 22, 2015

Preparation HTML

<div id="root">
    <div>
        <div>
            <ol>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ol>
            
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>        
        </div>
    </div>
    <div>
        <table>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </table>    
    <div>
    <form method="get">
        First name: <input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        <input type="submit" value="Submit">
    </form>    
    <iframe src="http://www.wikipedia.org"></iframe>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<script>
    var root = document.getElementById("root");
    var nodeNamesChildren = "";
    var nodeNamesTreeWalker = "";
       
    function checkElementHierarchyUsingChildren(currentNode) {
        if (currentNode &&
            currentNode.nodeType === Node.ELEMENT_NODE &&
            currentNode.nodeName !== "STYLE" &&
            currentNode.nodeName !== "SCRIPT") {
            nodeNamesChildren = nodeNamesChildren + ":" + currentNode.nodeName;
        }
        if (currentNode &&
            currentNode.children) {
            
            for (var i=0; i<currentNode.children.length; i++) {
                var child = currentNode.children[i];
                checkElementHierarchyUsingChildren(child);
            }
        }
    }
    
    
    function checkElementHierarchyUsingTreeWalker(currentNode) {       
        var treeWalker = document.createTreeWalker(currentNode, NodeFilter.SHOW_ELEMENT);
        do {            
            if (currentNode &&
                currentNode.nodeType === Node.ELEMENT_NODE &&
                currentNode.nodeName !== "STYLE" &&
                currentNode.nodeName !== "SCRIPT") {
                nodeNamesChildren = nodeNamesChildren + ":" + currentNode.nodeName;
            }
        } while (currentNode = treeWalker.nextNode())
    }
</script>

Test runner

checkElementHierarchyUsingChildren(root);
nodeNamesChildren = "";

 

checkElementHierarchyUsingTreeWalker(root);
nodeNamesTreeWalker = "";

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by brentm on January 22, 2015
• Revision 2: published on January 22, 2015