Example Programs on the DOM

Click on the anchor to see the rendering.

Right click on the anchor and select 'Save Target As ...' to download the file.

Displays the value of the innerHTML attribute of a p element and updates it [Sec. 13.1.1]
Uses the value of the id attribute of the p element as a reference to the object corresponding to this element.

Same as the last example but uses a reference to an object obtained with the getElementById Node instance method [Sec. 13.1.1]

Changes the font-size of the body, the left margin of one p element, and the class of another [Sec. 13.1.2]

Uses the setInterval method of window to dynamically change the position and other properties and content of a p element [Sec. 13.1.2]

Converts a string property value to an integer to do arithmetic on it [Sec. 13.1.2]

Uses getProperty, setProperty, getAttribute, and setAttribute [Sec. 13.1.3]
(Doesn't completely work in IE6.)

The example used to illustrate the DOM Inspector [Sec. 13.2]

Constructs an inorder traversal of the document tree [Sec. 13.2.1]
Click Paragraph to launch.

The first version of the document that allows li nodes to be moved [Sec. 13.2.2]
(This also works in IE6 but fails to illustrate one point.)

Illustrates the getElementsByTagName method [Sec. 13.2.3]
When anywhere in the body is clicked, all content except C disappears.

Use of createElement and createTextNode [Sec. 13.2.3]
When anywhere in the body is clicked, a paragraph is added.

The second version of the document that allows li nodes to be moved [Sec. 13.2.4]
(This doesn't completely work in IE6: nodes cannot be moved again.)

Illustrates intrinsic event attributes with alert boxes [Sec. 13.3.1]

Illustrates the use of an event handler and attributes of an Event object [Sec. 13.3.2]
Click on Hello to see the attributes. (Doesn't work with IE6.)

Use of the relatedTarget attribute of a mouse event [Sec. 13.3.3]
(Doesn't work with IE6.)

Illustrates the window-level events resize and scroll [Sec. 13.3.4]
Resize your browser window to fire a resize event. Make the window small enough that a scroll bar appear then scroll to fire a scroll event. (Doesn't work with IE6.)