JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<h3>Practice Set, 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</li>
    <li>If so, find out if the target string is within the text content of the node.</li>
    <li>If so, get the parent node and set its class attribute to "searchHit"</li>
</ol>
<p>If you've got it, each element containing the word 'text' will be highlighted in yellow. </p>

CSS

.searchHit {
    background-color:yellow;
}

JavaScript

function traverse(el, str) {
    // 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);
        //console.log(el.childNodes[i].nodeName);
        fn(el,str);
    }

    // Or your code can go here - acting on the way back up 
    //  the tree towards the root
        
    function fn(el,str){
        //1. At each node, determine if it's a text node
        if (el.childNodes[i].nodeType == 3){
            //2. If so, find out if the target string is within the text content of the node.
            if (el.childNodes[i].nodeValue.indexOf("text") > 0){
                //3. If so, get the parent node and set its class attribute to "searchHit"
                el.childNodes[i].parentNode.setAttribute("class", "searchHit");
            }
        }

    }
}

traverse(document.documentElement, 'text');