Javascript html element search and highlight

Question

I want to search a webpage for elements by tag name such a <p> or <body> or by class id and then highlight them. I want to do this using 3 buttons, set values, highlight next, and clear. Using three functions (getValues, highlightNext, clear)

First prompt the user to enter the value 1 or 2 corresponding to tag names or class names in the XHTML code. The dialog must require a user to input a valid value (1 or 2), and the script should not allow the user to continue otherwise.
Next the script should prompt the user to enter a string corresponding to the tag name or class name they would like to highlight within the document. This dialog must not allow a user to click cancel or enter the empty string as input.
When the user enters a proper value for the tag/class name, the function must retrieve the array of matching objects from the browser and tell the user how many elements matched their request with an alert box.
Each time highlightNext is called it will set the background color for the next matching element on the page to the same color.
Once all matching items have been highlighted, the function highlightNext should display a dialog box that indicates all elements have been highlighted.

Answer 1

var selectedElements = document.getElementsByTagName(<tagname>)

will give you all DOM elements by specified tag name. (http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp) You can highlight them by applying a background color style, something like:

element.style.backgroundColor = 'yellow'

This should get you started.

Javascript html element search and highlight

Question

1 answers

solution1
0 2010-11-08 20:17:34

Javascript html element search and highlight

Question

1 answers

solution1 0 2010-11-08 20:17:34

solution1
0 2010-11-08 20:17:34