DHTML OBJECT MODEL
Document Object Model (DOM) is a standard defined by W3C for programming the web dynamically. It allows HTML elements to be accessed as objects having attributes, and methods. Through DOM, Web Developers have control over the content as well as presentation of their web pages by individually accessing each and every element on their web pages in scripting.
With DOM, HTML elements can be accessed as objects, and attributes of HTML elements can be considered as properties of those objects. DOM allows objects to be scripted (using ID attribute) with languages like JavaScript and VBScript to achieve dynamic effects.
Object Referencing:
In DHTML, the whole web page containing various HTML elements including forms, frames and tables, is referred to as an object called Document object. The simplest way to refer to an element in scripting is by using the element's id attribute. Each HTML element is a child object within the Document object, and its various attributes can be manipulated by scripting.
Example:
In this example, the element p (paragraph) is identified using the name pText. It is referenced from the script written using JavaScript in the header section for changing the content of the paragraph.
The initial content of the paragraph is “Welcome to our Web site!”. As soon as the web page gets loaded (i.e., brought into the memory of the computer displaying the web page) the content of the paragraph (identified as pText) will be displayed to the user in a message box. Then the content of the paragraph will be changed into “Hello, World!” using the propery innerText of pText.
Collection - all and children:
In DHTML, collection refers to an array of related objects used in a web page. There are several special collections in the object model of DHTML. Some of them are: all, anchors, applets, forms, images, links, scripts and stylesheets.
The collection - all refers to all the HTML elements in a document, in the order in which they appear. This collection provides an easy way of referring to any element, especially if it doesn't have an id. The following script illustrates the use of all collection:
document.all.length - gives the number of HTML elements in a web page
document.all[i].tagName - refers to the name of the i-th element
doucment.all[i].innerElement - refers to the content of the i-th element
Children collection:
This collection named children refers to all the child elements of a container element. For example, html is a container for two of its children – head and body. Similarly, body is a container for many elements, which include <p> element (paragraph). Children collection provides an easy way to navigate all child elements of a container element in an HTML document.
