Ajax: Dynamic display and interaction using Document Object Model

Oct 13, 2008

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

Recent articles

Security in software outsourcing
May 07, 2015
One of the first things that comes to mind when thinking about outsourcing a software project is related to data security... read more
Attractive software outsourcing destinations in Eastern Europe
Mar 19, 2014
The Asian region was regarded, for many years, as the only suitable destination for software outsourcing (customers were attracted by affordable hourly rates and smaller development time frames). However in the last decade a new destination has emerged: Eastern Europe. Countries such as: Latvia, Hungary, Czech Republic, Romania, Poland, Ukraine etc. made a name for themselves on the outsourcing market by providing a complete set of services - consulting, development, support, maintenance.... read more
Romania - an attractive software outsourcing destination in Eastern Europe
Feb 25, 2014
Today's outsourcing market provides a wide range of outsourcing destinations and a high number of software development companies, so choosing an outsourcing company for your business can be a challenging and complicated process.... read more
Outsourcing: how to keep up with the competition
Jan 08, 2014
If at first, the economic climate forced more companies to outsource their IT departments towards outsourcing software companies, now outsourcing has become a viable solution for having access to a multitude of skills and expertise. ... read more
Software development: let's make it custom
Sep 09, 2013
We all want to have our requirements met immediately, but as a company it's even more important to receive personalized services, that are adapted to your day-to-day activities.... read more
...but what does software consulting mean?
Aug 15, 2013
What is software consulting? Software consulting is a service that helps other companies or self-employed individuals to meet their needs in terms of software infrastructure, development & support... read more
Press  |  Site Map  |  Technologies  |  Terms of Use  |  Privacy Policy
© 2019 SBP Romania. All rights reserved.