The W3C DOM and JavaScript - JavaScript by Example - page 691

Exercises

1. Looking at the following markup, draw a model demonstrating the element and
text nodes as a tree.

<p>This is the <em>content</em> of my paragraph.</p>

2. Create an HTML document based on the following DOM tree. Check your
DOM tree with a DOM inspector.

html

head body

title h1 p

text text text a text a text a text

text text text

3. Using the DOM properties and methods, and using the markup in Exercise 1,
create a JavaScript function that will be called when the document is loaded.
The function should be set up as follows:

a. Create an element node p assigned to a variable called para .
b. Create a text node assigned to a variable called txt1 .
c. Append txt1 to para .
d. Create an element node em assigned to a variable called emphasis .
e. Create a text node assigned to a variable called txt2 .
f. Append txt2 to emphasis .
g. Append emphasis to para .
h. Create a text node assigned to a variable called txt3 .
i. Append txt3 to para .

j. Append para to the element testdiv in the document.

Start with an HTML document containing < div > tags with an id attribute called
testdiv .

4. Create an HTML document with a list of vegetables styled with square bullets.
Write a JavaScript function that will use the getElementsByTagName() function
to retrieve the list items. Append a new vegetable to the list using the DOM.