professional_javascript_for_web/ch12/TreeWalkerExample1.htm

<!DOCTYPE html>
<html>
    <head>
        <title>TreeWalker Example</title>
        <script type="text/javascript">
           function makeList() {
                var div = document.getElementById("div1");
                var filter = function(node){
                    return (node.tagName.toLowerCase() == "li") ? 
                        NodeFilter.FILTER_ACCEPT : 
                        NodeFilter.FILTER_SKIP;
                };
                
                var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, filter, false);

                var output = document.getElementById("text1");
                var node = walker.nextNode();
                while (node !== null) {
                    output.value += node.tagName + "\n";
                    node = walker.nextNode();
                }

           }

        </script>
    </head>
    <body>
        <p><strong>Note:</strong> The <code>TreeWalker</code> object has only been implemented in Internet Explorer 9, Chrome,  Opera (version 7.6 and higher), Safari (version 1.3 and higher), and Firefox (version 1.0 and higher). It has not been implemented in Internet Explorer (so this example won't work).</p>
        <div id="div1">
            <p><b>Hello</b> world!</p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <textarea rows="10" cols="40" id="text1"></textarea><br>
        <input type="button" value="Make List" onclick="makeList()">
    </body>
</html>