DOM: The Document Object Model

While DOM is not a new thing, I have finally jumped into understanding it. I've been using elements of DOM (parts of DOM, not the elements themselves... even though that's what they are) for quite some time: manipulating HTML after it has been rendered using Javascript. Basically it is the aspect of AJAX and DHTML that make it Asynchronous and Dynamic.

DOM treats the entire HTML page as an XML document. The document is an object. Each element of HTML is an object as well, called a node. This allows one to control any aspect of anything on a website.

Like I said, this is not new and I am not just discovering this now, but I am finally exploring its manifest functions and its overall purpose.

I wrote a small script to demonstrate the essence of DOM which you can view at http://sandbox.ctv15.org/domexample1.html.

Here is the main function of the page:

function do_nodes(){
var parent = document.getElementById("parent");
nodeList = parent.childNodes;
child1 = nodeList[1];
child1prime = document.getElementById("child1");
if (child1 == child1prime){
alert("True");
}else{
alert("False");
}

}

As you can see from the example that child1 is in fact the same as child1prime. This proves that the object in the child list (nodeList) is the same as the one returned by getElementById.

I will expand on this later with a better example of the full features of DOM.