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.
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.
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:
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.
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.