Practice Set, Week 8, DOM Traversal

by Ramya Ranganathan

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

    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');