Lecture 13
The DOM, part 1
Ketan Mayer-Patel
University of North Carolina
The DOM
- Document Object Model
- Representation of the document in the browser.
- Use JavaScript to manipulate and alter the document.
- This is how our documents become interactive.
The DOM Tree
- Document is represented as a "tree" of nodes.
- What's a node?
- What's a tree?
- Perfect nesting == guaranteed tree
The document object
- document
- Object at the top of the tree
- Important attributes
- Important methods
- Creating new nodes:
- createElement(), createTextNode(), createAttribute()
- Finding nodes:
- getElementById(), getElementsByTagName()
Element nodes
- Element name
- Moving around
- parentNode
- childNodes
- firstChild, lastChild
- previousSibling, nextSibling
- Attributes
- getAttribute(), setAttribute()
- Also provided as direct properties of element node object
Attribute nodes
- Attribute nodes not in the tree per se
- Not a child of anyone, nor do they have children
- Associated with specific element nodes.
- Almost never really need to use them
- Attribute value provided as properties of element nodes with the attributes name.
Text Nodes
- Have no children
- nodeValue property is the text that it represents
Prototype Extension
- Using DOM directly kind of a pain
- Not all browsers will build the tree in exactly the same way.
- Often cumbersome to get to the node you want.
- Text nodes get in the way
- Limited methods for finding an element.
- Prototype to the rescue
- Extends DOM objects with lots of functionality
- Provides powerful ways for navigation and selection.