The DOM specification is provided by World Wide Web Consortium (W3C). W3C has released several versions of DOM specification; the current version is the Level 3 version and was published in 2004. We can find the DOM-related Technical Reports here: http://www.w3.org/DOM/DOMTR.
The DOM model uses a tree structure to represent elements of a page. The root of this tree is the document itself and its child elements (and the child elements of root's child elements) form the rest of the tree.
A tree structure allows us to navigate the tree easily. Each node can navigate to other nearby nodes depending upon the location of the nearby nodes with respect to the current node. A node that sits below a node is called a child node and DOM provides methods to reach to all child nodes from a parent node. On the other hand, a node that sits above the current node is a parent node and once again DOM provides methods to reach the parent node from the child nodes. Another relationship is that of sibling nodes -- sibling node sits at the same level (depth from the root of the tree) as the current node.
Let us use a simple example to understand the representation of an HTML page (provided below) using DOM. This page that has three elements in its body: a comment element, a paragraph element, and an ordered list element. We should note that DOM treats even comments as nodes.
<!doctype html> <html> <head></head> <body> <!-- A simple HTML page --> <p> Wizard's To-Do list: </p> <ol> <li>Practice Spells</li> <li>Visit Bilbo Baggins</li> <li>Repair broken staff</li> </ol> </body> </html>
Let us discuss the elements of the above HTML page. Being a tag-based language, HTML elements are identified using their tags. Thus, the above page consists of the following tags: the HTML page (identified by <html> tag), the head element (identified by <head> tag), the body element (identified by <body> element), a paragraph element (identified by <p> tag), an ordered list (identified by <ol> tag), a handful of list items of the ordered list (identified by <li> tag), and a comment element (identified as bounded between "").
All of the tags in this example are followed by a closing tag -- </head> for the head element, </p> for the paragraph element, </ol> for the ordered list element, </li> for the list entries, </body> for the body element, and "-->" for the comment element.
HTML offers a wide range of tags -- discussing them is beyond the scope of this article. We recommend the reader to refer to HTML specifications provided by W3C for additional reference (http://www.w3.org/html/).
We can use these HTML tags as a basis to build a DOM tree. Thus, the HTML page node has two child nodes: a head node and a body node. Since head node contains no elements, it has no have any child node. Next, the body node comprises of a comment node, a paragraph node, and an ordered list. The ordered list itself has three child nodes, each being an item of the list. Each of the comments, paragraph, and list item nodes also contain a child node that holds the text value of these elements. With this, the DOM tree would like as follows:
Let us look at the above figure to provide examples of a child node, a parent node, and a sibling node. In the above figure, the <ol> node is a child node of the <body> element. The <html> node is the parent node of the <body> node. Lastly, the <head> node is a sibling node of the <body> node.
Different types of DOM nodes have different characteristics, formally, identified as attributes. And thus, it is possible that given an attribute, two different types of nodes may not share it. As an example, an image element has an attribute of "src", but an ordered list does not have this attribute.
The document object contains a large number of properties. These properties allow document object to provide several functionalities. The first set of document properties allow us to get a handle of HTML elements (like getElementById(), getElementsByTagName, getElementsByName() etc). The second set of document properties allow us to create, add, delete, and replace HTML elements (like createElement(), appendChild(), removeChild(), replaceChild() etc). The third set of document properties allow us to traverse the DOM tree (with properties like childNodes, parentNode, nextSibling, previousSibling etc). In addition, the document also provides a large number of properties for managing document events (like onclick, onsubmit, onfocus etc); more on event handlers a little later.
To see all the properties provided by the document object, we can use a simple for/in loop to iterate over its properties. Here is the example:
Note that due to browser incompatibilities, we might find that the output of the above example could be different for different browsers.