Ajax: Dynamic display and interaction using Document Object Model
Once the data is styled and displayed it has to be modified dynamically. This is done through the Document Object Model by providing dynamics to a static HTML page, where DOM manipulation is used to modify the properties of already created page elements. The magic ingredient here is JavaScript that allows, e.g. For a div element to become visible or a button to fade out while a certain selection is made.
Basically, the DOM is a hierarchical or tree-based representation of a Web page , in which every part of the page, like the graphics, the text boxes, the buttons or the text itself, is modeled by the browser. Prior to IE 4 or Netscape Navigator 4, altering web page text was done through server-side technologies if at all. The entire page was labeled as a document, which contained all the HTML tags and text that represented the page. Like CSS and XHTML, the DOM is also a standard by the World Wide Web Consortium rules, therefore being a standard way for all browsers to represent page content. Items an be added to the DOM library or be altered by using a scripting language, like JavaScript or VBScript, which makes them appear immediately on the web page.
Each DOM technique is related to the client side, meaning that the browser can update the page or sections of the page instantly, a capability on which Ajax relies to a great extent in order to provide the rich user experience. Although the techniques exist since version 4 of IE, they have been underestimated, largely due to the limitations node capacity that could be manipulated with JavaScript. Nodes are new sections that can be added to the document in order to assemble the web page. Nodes can be elements, attributes or plain text.
DOM can be usually represented as a tree, the trunk being the document and the branches representing different elements on the web page. In this case, every part of the tree would be a node, which can also be tags , like HTML or XML, or attributes of tags. As for structure, a node can be a part of another larger node, which would be the "parent" of that node. Logically, a node can also be a parent to any number of image nodes, its "children", and these in turn are parents to their attribute child nodes. The Document Object Model is then just like the tree which is parent to the branch which is parent for its leafs.
DOM scripting methods have several developing advantages such as the simple creation of elements, which does not require anymore document writing to insert HTML and CSS into the page, or object constructors. DOM simply allows the creation of entire elements with no prerequisites. The insertion of new text, the change and removal of text from any element are possible without resorting to inner HTML or document write. Also, with DOM techniques one can grab all the tags of the document, or grab the text, leaving the tags behind, or even move entire parts of the document, or just parts and fragments and work with just those.
One of the best advantages of DOM scripting techniques is that all of them are suitable for any DOM compliant browser, which means that there is no need for creating different web page versions for each browser, when DOM offers just one common set of scripting techniques. Provided now with full DOM support applications like Netscape 6 and Mozilla , almost every element or node is now accessible.
Read more about it:
Ajax Technology - an Introduction
1. Standards-based presentation using XHTML and CSS
2. Dynamic display and interaction using Document Object Model
3. Data interchange and manipulation using XML and XSLT
4. Asynchronous data retrieval using XMLHttpRequest
5. JavaScript that binds everything together