Open source training & tutorials from experienced, passionate people
By A Web Design
The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of any document, permitting a programmer to modify its content and thus the visual presentation of the document on the VDU screen. Essentially, it exposes the content of web pages to Client side scripts that can then manipulate web page content.
W3C’s definition of DOM: The Document Object Model is a platform- and language-neutral interface that will allow client side scripts to dynamically access and update the content, structure and style of a web page in real time. Subsequent to the document’s content being processed (manipulated by a script) the results of that processing will be be incorporated back into the web page on the VDU screen.
All of the properties, methods, and events available to a web developer for manipulating and creating web page content and structure are organized into objects (e.g., the document object that represents the document itself, the table object that represents HTML table elements, the form object that represents HMTL form objects and so forth). Those objects are made accessible to scripting languages in most Browsers.
The DOM is most often manipulated using code written in JavaScript. What this means is that code written in JavaScript, uses the DOM to access all web page elements.
The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though the here is on JavaScript, implementations of the DOM can be built for any programming language such as Java, C# and so on.
Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and Javascript that allows a document’s elements to be manipulated at will.
The DOM hierarchy continues downward to encompass individual elements on a FORM, such as Text boxes, Labels, Radio buttons, Check boxes, Command buttons and so on, which belong to the form.
JavaScript’s object hierarchy is mapped to the DOM, which in turn is mapped to the web page elements in the Browser window. Hence, when a web page is rendered in a JavaScript enabled browser window, JavaScript is capable of uniquely identifying each element in the web page, because major elements of a web page are bound to the DOM.
The DOM that JavaScript recognizes is described in diagram 1.
JavaScript’s DOM is referred to as an instance hierarchy.
No HTML object is registered in the DOM by a JavaScript enabled browser unless they are assembled in memory prior being rendered in the browser window.
What this means is, if a document does not have any Anchors described in it the Anchors object will exist but it will be empty. If the document does not have any Links in it the Links object will exist but it will be empty.
All objects on a web page are not created equal. Each exists in a set relationship with other objects on the web page. From diagram 9.1??? the navigator (i.e. Browser) occupies the topmost slot in the DOM followed by the Window object and so on.
Below the Window is the Document object. Below the document object three other objects exist. They are the Anchor, Link and Form objects. Individual form elements are found under the Form object.
In addition to the DOM, other objects currently recognized by a JavaScript enabled browser are Plug-ins, Applets and Images. Hence using a JavaScript enabled browser and JavaScript most of the major web page objects are accessible.
However, every single element of a web page rendered in the browser window, is not part of the DOM.
For example, HTML tags such as <HEAD> . . . </HEAD>or <BODY> . . . </BODY>are not part of the DOM. Presentation styles, headings, body text, H1 to H6 and so on are not part of the DOM hence not recognized by JavaScript.
Diagram1
HTML can be used to create a Graphical User Interface (GUI) in a web page. HTML is capable of accessing and using a number of objects that actually belong to the operating system (i.e. M.S. Windows XP or Vista or 7 and so on). One such object is a textbox. A ‘textbox’ is used in an HTML form to capture user input.
The text box is an object, which belongs to the DOM. JavaScript recognizes a text box. JavaScript facilitates access to all the methods of a textbox. One of the methods of the textbox permits access to the contents of the text box. Hence, JavaScript can process the contents of any textbox in an HTML form.
Just like real world objects, HTML objects have a number of propertiesthat determine the behavior of that object. An object’s properties can be referenced as:
ObjectName.PropertyName
For example, a textbox can have properties like name, sizeand so on.
As seen, properties determine the state of an object. While building interactive web pages an object’s properties need to be set dynamically, i.e. while the object is in use. Thus all object based programming environments must have facilities to setor getthe value of object properties. This allows program code to control the state of the object at run time.
Methodsof an object are used to set or get a value of an object’s property. Thus determining how an object behaves. An object’s methods can be referenced as:
ObjectName.MethodName
Using JavaScript it is possible to use an object’s built-in methods and manipulate the object’s properties at run time. This gives a great deal of creative control to web page developers when web pages have to be created on demand.
Once JavaScript code accepts client side input and / or reads a client’s Browser parameters, on demand web pages can be structured and sent to the Browser from any Web Server.
Please wait...