Tree walking

Pressing the above buttons will:

• launch the do_document function with 3 arguments: A name of a HTML class, a CSS property and a value
• The do_document function will extract the body and then call the mark_tags function with arguments body, css_class and color
• The mark_tags function will examine all children of body and if there are are, also the children of these children, etc.
• Each time we find an element node that has an attribute class="important", we will change its style ...

Let's hope you enjoy this

If you want to reuse this code:

• Copy the whole script section in the head plus the lines with the input buttons. Just view the source of this page. It's all in there.
• Decide which elements in your HTML text you wish to highlight and add a class atttribute to each of these, e.g. something like: <p class="important">
• Change the class attribute value from "important" to whatever you wish, but don't forget to change the arguments when calling the do_document function, e.g. if the CSS class you wish to highlight is "cool" and you want the color to be red:

  <input type=button onClick="do_document('important','cool','red');" value="Highlight important stuff">

• You may add as many input buttons you like, but of course there should be a corresponding css class and a value.
• Of course, you also can change the code to modify more complex style properties, but that will require some JavaScript and DOM knowledge....