Introduction to the Document Object ModelReview the W3C DOM2 standard recommendation.
The Document Root
document object serves as the root of this node tree. It
too implements the
Node interface. It will have child nodes but no
parent node or sibling nodes, as it is the starting node. In addition to being
Node, it also implements the
This interface provides methods for accessing and creating other nodes in the document tree. Some methods are:
Note that unlike other nodes, there is only one
in a page. All of the above methods (except
getElementsByTagName()) can only be used against the document
object, i.e., using the syntax
document object can also have several other properties
related to older DOM level support. For example, you'll find that many browsers
relating to the BGCOLOR and TEXT attributes of the BODY tag.
These properties are intended to provide some backward compatibility so that pages designed for older browsers will still work properly with newer versions. They can still be used in scripts but they may not be supported in future versions.
Traversing the Document Tree
As mentioned, the document tree reflects the structure of a page's HTML code. Every tag or tag pair is represented by a element node with other nodes representing attributes or character data (i.e., text).
Technically speaking, the
document object has only one child
element, given by
document.documentElement. For web pages, this
represents the outer HTML tag and it acts as the root element of the document
tree. It will have child elements for HEAD and BODY tags which in turn will
have other child elements.
Using this, and the methods of the
Node interface, you can
traverse the document tree to access individual node within the tree. Consider
<html> <head> <title></title> </head> <body><p>This is a sample paragraph.</p></body> </html>
and this code:
which would display "P", the name of the tag represented by that node. The code breaks down as follows:
document.documentElement- gives the page's HTML tag.
.lastChild- gives the BODY tag.
.firstChild- gives the first element in the BODY.
.tagName- gives that element's tag name, "P" in this case.
There are some obvious problems with accessing nodes like this. For one, a simple change to the page source, like adding text or formatting elements or images, will change the tree structure. The path used before may no longer point to the intended node.
Less obvious are some browser compatibility issues. Note that in the sample HTML above, there is no spacing between the BODY tag and the P tag. If some simple line breaks are added,
<html> <head> <title></title> </head> <body> <p>This is a sample paragraph.</p> </body> </html>Try BrainJar.com's DOM Viewer utility to interactively navigate a document tree.
Accessing Elements Directly
This is where the
document.getElementById() method comes in
handy. By adding an ID attribute to the paragraph tag (or any tag for that
matter), you can reference it directly.
<p id="myParagraph">This is a sample paragraph.</p> ... alert(document.getElementById("myParagraph").tagName);
This way, you can avoid compatibility issues and update the page contents at will without worrying about where the node for the paragraph tag is in the document tree. Just remember that each ID needs to be unique to the page.
A less direct method to access element nodes is provided by
document.getElementsByTagName(). This returns an array of nodes
representing all of the elements on a page with the specified HTML tag. For
example, you could change color of every link on a page with the following.
var nodeList = document.getElementsByTagName("A"); for (var i = 0; i < nodeList.length; i++) nodeList[i].style.color = "#ff0000";
Which simply updates each link's inline style to set the
parameter to red. Give it a