DOM "An interesting API to manage web pages" (Theory)

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.

With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the XML internal and external subsets have not yet been specified.

As a W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications. The DOM is designed to be used with any programming language. In order to provide a precise, language-independent specification of the DOM interfaces, we have chosen to define the specifications in Object Management Group (OMG) IDL

The name "Document Object Model" was chosen because it is an "object model" in the traditional object oriented design sense: documents are modeled using objects.As an object model, the DOM identifies:

• the interfaces and objects used to represent and manipulate a document
• the semantics of these interfaces and objects - including both behavior and attributes
• the relationships and collaborations among these interfaces and objects

Where the Document Object Model came from

The DOM originated as a specification to allow JavaScript scripts and Java programs to be portable among Web browsers. "Dynamic HTML" was the immediate ancestor of the Document Object Model, and it was originally thought of largely in terms of browsers. However, when the DOM Working Group was formed at W3C, it was also joined by vendors in other domains, including HTML or XML editors and document repositories.

DOM Interfaces and DOM Implementations

The DOM specifies interfaces which may be used to manage XML or HTML documents. It is important to realize that these interfaces are an abstraction - much like "abstract base classes" in C++, they are a means of specifying a way to access and manipulate an application's internal representation of a document. Interfaces do not imply a particular concrete implementation. Each DOM application is free to maintain documents in any convenient representation, as long as the interfaces shown in this specification are supported. Some DOM implementations will be existing programs that use the DOM interfaces to access software written long before the DOM specification existed. Therefore, the DOM is designed to avoid implementation dependencies; in particular,

1. Attributes defined in the IDL do not imply concrete objects which must have specific data members - in the language bindings, they are translated to a pair of get()/set() functions, not to a data member. Read-only attributes have only a get() function in the language bindings.
2. DOM applications may provide additional interfaces and objects not found in this specification and still be considered DOM conformant.
3. Because we specify interfaces and not the actual objects that are to be created, the DOM cannot know what constructors to call for an implementation. In general, DOM users call the createX() methods on the Document class to create document structures, and DOM implementations create their own internal representations of these structures in their implementations of the createX() functions.

The Level 1 interfaces were extended to provide both Level 1 and Level 2 functionality.
DOM implementations in languages other than Java or ECMAScript may choose bindings that are appropriate and natural for their language and run time environment. For example, some systems may need to create a Document2 class which inherits from Document and contains the new methods and attributes.
DOM Level 2 does not specify multithreading mechanisms.

Link:http://www.quirksmode.org/dom/intro.html#change

The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself. By calling the element by its proper DOM name, we can influence it.

On this page I give an introduction to the W3C Level 1 DOM that has been implemented in the newest generation of browsers. It will give you an overview of how the DOM works and what you can do with it.

First some words about the DOM Recommendation and the purpose of the DOM, then I teach you what nodes are and how you can walk the DOM tree from node to node. Then it's time to learn how to get a specific node and how to change its value or attributes. Finally, I'll teach you how to create nodes yourself, the ultimate purpose of the new DOM.

The Recommendation

The Level 1 DOM Recommendation has been developed by the W3C to provide any programming language with access to each part of an XML document. As long as you use the methods and properties that are part of the recommendation, it doesn't matter if you parse an XML document with VBScript, Perl or JavaScript. In each language you can read out whatever you like and make changes to the XML document itself.

As some of you might have guessed, this paragraph describes an ideal situation and differences (between browsers, for instance) do exist. Generally, however, they're far smaller than usual so that learning to use the W3C DOM in JavaScript will help you to learn using it in another programming language.

In a way HTML pages can be considered as XML documents. Therefore the Level 1 DOM will work fine on an HTML document, as long as the browser can handle the necessary scripts.

You can read out the text and attributes of every HTML tag in your document, you can delete tags and their content, you can even create new tags and insert them into the document so that you can really rewrite your pages on the fly, without a trip back to the server.

Because it is developed to offer access to and change every aspect of XML documents, the DOM has many possibilities that the average web developer will never need. For instance, you can use it to edit the comments in your HTML document, but I don't see any reason why you would want to do so. Similarly, there are sections of the DOM that deal with the DTD/Doctype, with DocumentFragments (tiny bits of a document) or the enigmatic CDATA. You won't need these parts of the DOM in your HTML pages, so I ignore them and concentrate instead on the things that you'll need in your daily work.

Nodes

The DOM is a Document Object Model, a model of how the various objects of a document are related to each other. In the Level 1 DOM, each object, whatever it may be exactly, is a Node. So if you do

<P>This is a paragraph</P>

you have created two nodes: an element P and a text node with content 'This is a paragraph'. The text node is inside the element, so it is considered a child node of the element. Conversely, the element is considered the parent node of the text node.

              <P> <-- element node
               |
               |
     This is a paragraph <-- text node

If you do

<P>This is a <B>paragraph</B></P>

the element node P has two children, one of which has a child of its own:

              <P>
               |
         --------------
        |              |
    This is a         <B>
                       |
                       |
                    paragraph

Finally there are attribute nodes. (Confusingly, they are not counted as children of an element node. In fact, while writing this pages I've done a few tests that seem to indicate that Explorer 5 on Windows doesn't see attributes as nodes at all.) So

<P ALIGN="right">This is a <B>paragraph</B></P>

would give something like

              <P> ----------------
               |                  |
         --------------         ALIGN
        |              |          |
    This is a         <B>         |
                       |        right
                       |
                    paragraph

So these are element nodes, text nodes and attribute nodes. They constitute about 99% of the content of an HTML page and you'll usually busy yourself with manipulating them. There are more kinds of nodes, but I skip them for the moment.

As you'll understand, the element node P also has its own parent, this is usually the document, sometimes another element like a DIV. So the whole HTML document can be seen as a tree consisting of a lot of nodes, most of them having child nodes (and these, too, can have children).

            <BODY>
               |
               |-------------------------------------
               |                                     |
              <P> ----------------            lots more nodes
               |                  |
         --------------         ALIGN
        |              |          |
    This is a         <B>         |
                       |        right
                       |
                    paragraph

Walking through the DOM tree

Knowing the exact structure of the DOM tree, you can walk through it in search of the element you want to influence. For instance, assume the element node P has been stored in the variable x (later on I'll explain how you do this). Then if we want to access the BODY we do

x.parentNode

We take the parent node of x and do something with it. To reach the B node:

x.childNodes[1]

childNodes is an array that contains all children of the node x. Of course numbering starts at zero, so childNodes[0] is the text node 'This is a' andchildNodes[1] is the element node B.

Two special cases: x.firstChild accesses the first child of x (the text node), while x.lastChild accesses the last child of x (the element node B).

So supposing the P is the first child of the body, which in turn is the first child of the document, you can reach the element node B by either of these commands:

document.firstChild.firstChild.lastChild;
document.firstChild.childNodes[0].lastChild;
document.firstChild.childNodes[0].childNodes[1];
etc.

or even (though it's a bit silly)

document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];

Getting an element

However, walking through the document in this way is quite cumbersome. You'll need to be absolutely certain of the structure of the entire DOM tree and since the whole purpose of the Level 1 DOM is to allow you to modify the DOM tree, this could lead to problems really quickly.

Therefore there are several ways of jumping directly to an element of your choice. Once you have arrived there, you can walk the last bit of the DOM tree to where you want to be.

So let's continue with our example. You want to access the element node B. The very simplest way is to directly jump to it. By the methoddocument.getElementsByTagName you can construct an array of all tags B in the document and then go to one of them. Let's assume that this B is the first one in the document, then you can simply do

var x = document.getElementsByTagName('B')[0]

and x contains the element node B. First you order the browser to get all elements B in the document (document.getElementsByTagName('B')), then you select the first of all B's in the document ([0]) and you've arrived where you want to be.

You could also do

var x = document.getElementsByTagName('P')[0].lastChild;

Now you go to the first paragraph in the document (we assume that our P is the first one) and then go to its lastChild.

The best way, the only way to be certain that you reach the correct element regardless of the current structure of the DOM tree, is to give the B an ID:

<P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>

Now you can simply say

var x = document.getElementById('hereweare');

and the element node B is stored in x.

Changing a node

Now that we have reached the node, we want to change something. Suppose we want to change the bold text to 'bold bit of text'. We then have to access the correct node and change its nodeValue. Now the correct node in this case is not the element node B but its child text node: we want to change the text, not the element. So we simply do

document.getElementById('hereweare').firstChild.nodeValue='bold bit of text';

and the node changes. Try it and change it back again.

This is a paragraph

You can change the nodeValue of each text node or each attribute. Thus you can also change the ALIGN attribute of the paragraph. Try it and change it back again.

This, too, is quite simple. Take the node you need (the B's parentNode, in this case), then use the setAttribute() method to set the ALIGN attribute to the value you want:

function test2(val) {
 if (document.getElementById && document.createElement)
 {
  node = document.getElementById('hereweare').parentNode;
  node.setAttribute('align',val);
 }
 else alert('Your browser doesn\'t support the Level 1 DOM');
}

Creating and removing nodes

Changing nodes is nice, it can even be useful, but it's nothing compared to actually creating your own nodes and inserting them into your document. I can easily add an HR right below this paragraph andremove it quite as easily.

Creating the element is done by a special method:

var x = document.createElement('HR');

Thus an HR is created and temporarily stored in x. The second step is to insert x into the document. I wrote a special SPAN with ID="inserthrhere" at point where it should appear. So we use theappendChild() method on the SPAN and the HR is made a child of the SPAN and it magically appears:

document.getElementById('inserthrhere').appendChild(x);

Removing it is slightly more complex. First I create a temporary variable node to store the SPAN, then I tell it to remove its first child (the HR).

var node = document.getElementById('inserthrhere')
node.removeChild(node.childNodes[0]);

In the same way we can create a new text node and append it to our faithful B ID="hereweare"

var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);

Try it, then go up to see the result. You will notice that executing the old functions does not remove the new text node, that's because it has become a separate node:

           <B>
            |
       ------------
      |            |
  paragraph    A new text node
               has been appended!

(To merge them into one node use the normalize() method that's sadly not supported by Explorer 5 on Windows).

I won't tell you how to remove the text node, try writing that script yourself. It'll be a useful exercise.

HTML DOM

HTML, the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the meaning of elements. The HTML DOM includes such things as the className property on HTML elements, or APIs such as document.body .

The HTML specification also defines restrictions on documents; for example, it requires all children of a ul element, which represents an unordered list, to be lielements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard.

Other notable APIs

• The setTimeout and setInterval functions have been first specified on the Window interface in HTML Standard.
• XMLHttpRequest. API allowing to send asynchronous HTTP request.
• CSS Object Model. The CSSOM is used to abstract CSS rules as objects
• WebWorkers. API that allows parallel computation.
• WebSockets. API that allows low-level bidirectional communication.
• Canvas 2D Context. Drawing API for the canvas element.

Browser support

Every web developer has experienced that the DOM is a mess. Browser support uniformity varies a lot from feature to feature. The main reason for this situation is the fact that many important DOM features have had very unclear, if any, specifications. Also, different web browsers have added incompatible features for overlapping use cases (like the Internet Explorer event model). The current (as of June 2011) trend is that the W3C and particularly the WHATWG are defining older features in detail, in order to improve interoperability. Following this trend, browsers are improving their implementations based on these specifications.

One common, though perhaps not the most reliable, approach to cross-browser compatibility is to use a JavaScript library. These libraries abstract DOM features and ensure their APIs work similarly in different browsers. Some of the most widely used frameworks are jQuery, prototype, and YUI.