1. Introduction to Programming the WWW I CMSC 10100-1 Winter 2003 Lecture 10

2. Order for the day The Document Object Model (DOM) Some DOM/JS examples

3. The DOM The DOM provides an abstract description:  document structure  operations on a document The DOM describes several markup languages, not just HTML Vendors support this model to make Web pages interoperable.

4. Document Structure The DOM specifies that a document is structured into a tree consisting of nested nodes is at the top/bottom, are its children,, instances are children of, etc Every item in the document is a node with a parent and possibly children

5. More about nodes Each tag is an element node Attributes and contained text are children nodes of the node containing it. Hello world Text nodes may contain further children p text nodealign

6. Visualizing Nodes

7. Manipulating nodes Javascript has a DOM API (application programmer interface) that allows us to access, look at, and edit attribute nodes. Every element node has a style child, and this can also be edited to control everything!

8. Some basic DOM operations document.getElementByID() document.getElementsByTag() document.createNode() document.createTextNode() node.appendChild() node.setAttribute(‘att’,’val’) node.style. =“value”

9. Example 1: Image rollover Use the “onmouseover” attribute to call some functions These functions get the element and set the attribute

10. Example 2: Updating style change alignment, color, and size through Javascript buttons Note that when CSS properties are hyphenated (e.g. text-algin), Javascript refers to them with the dash removed and the next letter capitalized (e.g. textAlign)

11. Example 3: Pagewriter Use Javascript to append nodes to a page dynamically at loading. Addresses scaling issue if code is externally linked.