Description
Write a simple JavaScript program that will recursively walk the DOM for an associated HTML file and print the types of the elements encountered (embedded data need not be printed, we are just interested in the structure), each preceded by an integer reflecting the element’s nesting level within the hierarchical structure of the HTML document. Thus, <HEAD> and <BODY> would be at the second level (‘2’) while <HTML>, would naturally be at the first level (‘1’). You should also print the closing tags for each element found to make the nesting clear. Thus, your output should look something like the following:
1<HTML>
2<HEAD>
- element types in “ <HEAD></HEAD>” labelled appropriately
2</HEAD>
2<BODY>
- element types in “<BODY></BODY>” labelled appropriately
2</BODY>
1</HTML>
To test your code, you can create an HTML file and manually embed the JavaScript in the HTML file. You should then just be able to open the file in a browser (by double-clicking it) to see the output. This approach is necessary since the JavaScript interpreter is embedded in the browser and not generally available from the command line. You can use any valid HTML file for testing.
Hand in your JavaScript code embedded in a simple HTML file with at least 4 levels of nested elements. The markers may, of course, change the HTML but will not modify your JavaScript code during testing.
Explanation & Answer
