W3C Document Object Model and HTML


Dynamic HTML has brought great improvements to static web pages. However, the main problem with DHTML is cross-browser compatibility. Both the leading browsers IE and Netscape have different approach for DHTML and it makes script writer's life difficult.

With the introduction of Document Object Model(DOM) from W3C this problem is greatly solved. DOM presents a standard object model which is followed by IE 5+ and NS 6

Difference between DHTML ad W3C DOM

DHTML has its own properties and methods for each HTML tag and each tag can be accessed individually.

DOM presents a generic object model. DOM views at HTML document as a tree. It provides generic properties and methods which allow us to navigate and manipulate various 'Nodes'. Unlike DHTML, DOM lacks event handling and programmer has to take help of familiar DHTML events.

Most of the familiar DHTML objects like document, Forms and Images still exist in DOM.

Using the DOM, we can:

  • Create elements and attach them to any point in the document tree.
  • Manipulate tree branches in a document and insert the changed branches back into the tree.
  • Delete elements.
  • Move one part of the document tree to another without destroying and recreating the content.
  • Search the document for a string.
  • Search the tags for a given attribute.

Important Members of the Object model

The DOM exposes objects, collections, properties, and methods. Following table lists    a few of the most important methods, Properties and collections.

Document Methods
creates a new tag.
creates new content for the document.
creates an attribute for a tag.
returns a list of matching nodes (NodeList).
HTMLDocument Methods
An HTMLDocument object has these methods in addition to the methods of Document.
Opens a document for new content.
Closes a document.
Appends the text to the open document.
Appends text and a new line to the open document.
returns the element with the given ID.
Element Methods
An Element has these methods in addition to the methods of Node.
Gets the value of the named attribute.
setAttribute(name, value)               
Sets the value of the named attribute.
Removes the named attribute.
Returns a list of matching nodes (NodeList).
Node Methods
insertBefore(newChild, refChild)               
Inserts a child node into the document before the given node.
replaceChild(newChild, oldChild)               
Replaces the old node with the new node.
Removes the child node from the document.
Adds the node to the document.
Returns true if the node has children.
Generates a copy of the tree under the given node.
Node Properties
returns reference to first child node
returns reference to last child node
returns reference to previous node which is at the same level as the current node
returns reference to next node which is at the same level as the current node
returns reference to parent node
returns name of the node like TABLE
returns 1 for Tag,2 for attribute and 3 for text node
returns/set text from a text node
returns/set text from a text node
returns/sets image url for IMG element
Node Collections
returns list of child nodes of current node
returns list of attributes of current node

Examples :

We will now see some examples of how to use DOM. For that we will use following simple HTML file

Note : Here, one peculiar thing to be noted is even though we omit TBODY element, one will be assumed by default by DOM


<body id=body1>
<table id=table1>

<form id=form1 name=form1>
<input id=btn1 name=btn1 type=button value=Click onclick="display();">


Example of Navigating a Table

Now, we will navigate through the table and display all the data contained in it.
Add the following in display() function in the head section.

function display()
alert("Table has " + table1.firstChild.childNodes.length+" rows");

    alert(table1.firstChild.childNodes[i].childNodes[0].childNodes[0].nodeValue); //Data1
    alert(table1.firstChild.childNodes[i].childNodes[1].childNodes[0].nodeValue); //Data2


Example of Dynamically Changing Table Contents

Here, the code to access the individual cell content remains the same as above but we need to assign the value to the cells like :

table1.firstChild.childNodes[i].childNodes[0].childNodes[0].nodeValue="some value";


Example of Dynamically Adding/Removing Rows to Table

Now, let us add some new rows to the table

Add a new function AddRow() as follows :

function AddRows()
var row,col1,col2,txt1,txt2;

txt1=document.createTextNode("this is new text 1");
txt2=document.createTextNode("this is new text 2");







Here, we first created the content of the new cells using createTextNode method. Then we created a new TR element, two TD elements using createElement method. These elements yet do not belong to any specific table. We attach them to the table using appendChild method.

Now, we will remove rows from the table. This is done using removeChild method as follows:

Bipin Joshi is an independent software consultant, trainer, author, and meditation teacher. He has been programming, meditating, and teaching for 25+ years. He conducts instructor-led online training courses in ASP.NET family of technologies for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Facebook  Twitter  LinkedIn  YouTube

Posted On : 18 December 2000

Tags : XML