W3C DOM Introduction



The World Wide Web Consortium (W3C) united browser vendors to draw up a standard object model. It's working to make all browser vendors to comply with this model to solve the problem of browser compatibility. This new model also extends the functions of dynamically manipulating documents.

Simply put, in the DOM specification, a document contains all tag definitions and all tags are represented as objects; even a text is an object. According to the specification, these objects form a tree structure. For example:  
<html>
    <head>
        <title>Openhome.cc</title>
    </head>
    <body>
        <h1>Hello!World!</h1>
        <a href="Gossip/index.html">Study note</a>
    </body>
</html>
Objects used to represent elements of this HTML form the following tree structure:
document                             (Document)
       |-html                        (HTMLHtmlElement)
            |-head                   (HTMLHeadElement)
            |    |-title             (HTMLTitleElement)
            |          |-Openhome.cc (Text）
            |
            |body                    (HTMLBodyElement)
                 |-h1                (HTMLHeadingElement
                 |  |-Hello!World!   (Text)
                 |
                 |-a                 (HTMLAnchorElement)
                   |-Study note      (Text)
Each object type (in Firefox) appears in the right side of the above structure. Notice that the document represents the entire document, not the html tag; you may use document.childNodes[0] to get the html element. The childNodes property returns a NodeList instance containing a collection of a node's child nodes. It's an array-like object. You can use an index to get the corresponding child node. The convenient document.documentElement also returns the html element. If you want to get the body element, the document.body is feasible too. Note that a text is also an element of the tree structure.

Even though the "HTML" prefix appears in the element types above, DOM is not specifically worked out for HTML. The DOM API has two parts: one is the Core DOM API and the other is the HTML DOM API. The Core API is a neutral specification which can be implemented in any language and suitable for any XML-based document. You can find information about the Core DOM API in XML DOM Tutorial.

The HTML API is an extension of the Core API, specialized to manipulate HTML documents. The corresponding type of each object almost has a "HTML" prefix. You can find information about the HTML DOM API in HTML DOM Tutorial.

The Core API views all document content as nodes, including the document itself. Nodes are classified according to content type.
Node
   | Document
   | Element
   | Text
   | Attr
   ...
The Document type represents the entire document; Element - also a Node - represents all tags; Text - a Node too - represents the text. For more information about the types of Core DOM, please visit:
In Level 0 DOM, navigator, location, frames, screen, history and other browser-related objects all rest on the window object. Actually, only the document object is the document-related object which has few functions. These document-related functions are brought into the subset of the DOM specification. Since these old APIs are aimed at HTML, you cannot find them in the Document specification; they rest on the HTMLDocument, specifically defined for HTML manipulation.

Likewise, Element only defines the element operations of Core DOM API so you cannot find HTML-related operations on it; they are defined on the extended types of HTMLElement, such as HTMLHeadElement.

Every node has the nodeName and nodeType property. The former returns the node name; the later returns the constant of the node type. The returned constant is used to look up the corresponding node name. You can find the table about each node type and their respective named constant in the following link:
To illustrate, the following uses JavaScript and W3C DOM API to list nodes and types of the document. 
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
            window.onload = function() {
                var typeNames = [
                    '',
                    '[ELEMENT_NODE]',
                    '[ATTRIBUTE_NODE]',
                    '[TEXT_NODE]',
                    '[CDATA_SECTION_NODE]',
                    '[ENTITY_REFERENCE_NODE]',
                    '[ENTITY_NODE]',
                    '[PROCESSING_INSTRUCTION_NODE]',
                    '[COMMENT_NODE]',
                    '[DOCUMENT_NODE]',
                    '[DOCUMENT_TYPE_NODE]',
                    '[DOCUMENT_FRAGMENT_NODE]',
                    '[NOTATION_NODE]'
                ];
                
                function list(parent, indent) {
                    var nodes = parent.childNodes;
                    var tree = [];
                    for(var i = 0; i < nodes.length; i++) {
                        tree.push(indent + nodes[i].nodeName + 
                                  typeNames[nodes[i].nodeType] + '<br>');
                        tree.push(list(nodes[i], '　　' + indent));
                    }
                    return tree.join('');
                }
                
                document.getElementById('console').innerHTML = 
                   'document' + typeNames[document.nodeType] + 
                   '<br>' + list(document, '　　');
            };
        </script>
        <title>Openhome.cc</title>
    </head>
    <body>
        <h1>Hello!World!</h1>
        <a href="http://caterpillar.onlyfun.net/eGossip/">Study note</a>
        <div id="console"></div>
    </body>
</html>

Interestingly, the newline and indent characters are viewed as text nodes in Firefox, while not in Internet Explorer, so you will see different results in these two browsers.