A first look to the DOM model

Questo articolo l'ho scritto in inglese, me ne sono accorto quando ero arrivato circa a metà... non chiedetemi il perchè, perdonatemi i probabili errori di grammatica, ma non avevo voglia di riscrivere in italiano tutto quanto.

• DOM Introduction
• DOM basic manipulation

DOM Introduction

A first look to the DOM model

DOM means Document Object Model. It's a model of how XML and HTML are represented in a tree structure.
DOM is a platform neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

DOM provides an OO API that allows parsing XML and HTML into a well defined tree structure and operating on its contents.

DOM basic manipulation

Destroying and creating objects

The first basic example is to show the basic methods for get an element and remove it from the DOM-tree. The code is very simple:

<script language="javascript" type="text/javascript">
function destroyObject(obj)
{
	var formElement = document.getElementById(obj);
	var parentElement = formElement.parentNode;

	parentElement.removeChild(formElement);
};
</script>
	

The destroyObject() function get from the DOM-tree an element with the getElementById() method of the document class. DOM provide us a specific method for removing a subtree from the DOM-tree, the method is removeChild(). We get the parent node of the one we have to remove with the parentNode propriety of the element we have just catch with the getElementById() method.

This is an live example: clicking on the "Destroy" button you'll destroy the gray box.

The second example is a bit more difficult, it will recreate the box. How? We have to create the subtree and then we'll append it where we need.

<script language="javascript" type="text/javascript">
function createObject(obj) {
	var myDiv = document.createElement("div");
	var parentNode = document.getElementById(obj);
	myDiv.setAttribute("id","lorem");
	myDiv.appendChild(document.createTextNode("text"));
	parentNode.appendChild(myDiv);
};
</script>

The createElement() method create the new node, we can set an Attribute with the setAttribute() method.
To the new div node we can append a child node with the text (createTextNode()). For appending the new subtree we use the appendChild() method for link it where we need in the DOM-tree.

Here you can see the example in action.

Soon I'll try to study more of this topic, with few code you can get real dynamic web pages.