The Web Wizard

1
The Web Wizards Guide To DHTML and CSS

• Chapter 3
• Introducing the W3C DOM

2
Chapter Objectives

• To discover the W3C DOMits nature and its
  importance
• To learn about nodes and how to reference them
• To learn how to dynamically change the content of
  nodes

3
What is the DOM?

• DOM is Document Object Model
• A standard way to refer to objects on a Web page
• The W3C DOM1 replaces proprietary DOMs from
  Netscape and Microsoft
• document.getElementById()
• document.getElementsByTagName()

4
What are Nodes?

• An object in DOM1 is called a node.
• Element nodes (ltpgt, lth1gt, etc.)
• Text nodes (text contained by element nodes)
• Attribute nodes (aligncenter)

5
Visualizing Nodes
6
Things to do with nodes

• Change the text of nodes
• Add and remove text nodes
• Create element nodes to dynamically style content
• Change the value of attribute nodes