Practice Set, Week 8, DOM Traversal

by Aboubacar Bah

HTML

<h3>Practice Set #3, Week 8, DOM Traversal</h3>

<p>Code is provided here that will traverse the DOM. Your job is to add some code that will take some action at each node.</p>
<p>Your task is to find every element that has the word "text" in it, and add the className "searchHit" to their parent elements.</p>
<p>The steps to do this will look something like this:</p>
<ol>
    <li>At each node, determine if it's a text node (check nodeType)</li>
    <li>If so, find out if the target string is within the text content of the node.
        <p>(<b>Hint:</b> (use 'nodeValue') Look up the String reference in w3schools and look for a method that'll help you find a string within another string. There are several ways to do this, and you can do it without needing regular expressions, which we will be covering in Week 10.)</p>
    </li>
    <li>If so, get the parent node and set its class attribute to "searchHit"</li>
</ol>
<p>Your code can go in either of the two places noted in the Javascript comments (but not both!). You don't need to change anything outside of the traverse() function, unless you'd like to change the search string provided in the intial call to traverse().</p>
<p>If you've got it, each element containing the word 'text' will be highlighted in yellow.</p>

CSS

.searchHit {
    background-color:yellow;
}

JavaScript

// here is our traverse() function
function traverse(el, str) {
    /*
     * @param {HTMLElement} el - the element we're visiting now
     * @param {String} str - the string we're searching for
     */

    // Your code can go here - acting on the way down 
    //   the tree towards the branches
    /* SOLUTION NOTE:
     * There are lots of options here for how to do this,
     * but all will have to test the nodeType to see if it's
     * 3 (node.TEXT_NODE is a constant that always equals 3)
     * and will have to check el.nodeValue to see if it's got
     * str within it. 
     
     * Once we know we have a textNode, it seems prudent to check that 
     * its nodeValue is a string, otherwise calling a string method like 
     * indexOf() will throw an error and our code will stop executing.
     
     * Finally, we get el's parent (which we assume to be an ElementNode, 
     * since textNodes can't really be anywhere else), and give it a 
     * class of "searchHit".
     */
    if (el.nodeType == el.TEXT_NODE){
        if (typeof el.nodeValue == "string"    
                  && el.nodeValue.indexOf(str) != -1){
            el.parentNode.setAttribute("class","searchHit");
        }
    }    
    
    
    for (var i = 0; i < el.childNodes.length; i++) {
        traverse(el.childNodes[i], str)
    }
    // Or your code can go here - acting on the way back up 
    //  the tree towards the root


}
// here we call our traverse() function
traverse(document.documentElement, 'text');