Learning Document Object Model (DOM)
We may define Document Object Model (DOM) as a cross-platform and language-independent application programming interface. DOM treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. Additionally, the objects can be manipulated programmatically and any visible changes may then be reflected in the display of the document.
In order to render a document such as an HTML page, most web browsers use an internal model similar to the DOM. In the same vein, the nodes of every document are organized in a tree structure, called the DOM tree. Finally, when an HTML page is rendered in browsers, it downloads the HTML into local memory. Such that it automatically parses it to display the page on screen.
When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document. Since DOM supports navigation in any direction and allows for arbitrary modifications.Correspondingly, an implementation must at least buffer the document that has been read so far.
Web browsers rely on layout engines to parse HTML into a DOM. Some layout engines, such as Trident/MSHTML, are associated primarily or exclusively with a particular browser, such as Internet Explorer. Others, including Blink, WebKit, and Gecko. The different layout engines implement the DOM standards to varying degrees of compliance.
Further, W3C DOM and WHATWG DOM standards are implemented in most modern browsers. Many browsers extend the standard, so care must be exercised when using them on the web where documents may be accessed by various browsers with different DOMs.
Illustration: The standard DOM specifies that the getElementsByTagName method in the code below must return a list of all the <P> elements in the document:
var paragraphs = document.getElementsByTagName(“P”);
// paragraphs is the first <p> element
// paragraphs is the second <p> element, etc.
You don’t have to do anything special to begin using the DOM. to begin with, different browsers have different implementations of the DOM, therefore these implementations exhibit varying degrees of conformance to the actual DOM standard. But every web browser uses some document object model to make web pages accessible to script.
When you create a script – whether it’s inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the document or window elements. Your DOM programming may be something as simple as displaying an alert message by using the alert() function from the window object. Else it may use more sophisticated DOM methods to actually create new content, as in the longer example below.
<body onload=”window.alert(‘Welcome to my home page!’);”>
DOM Programming Interface
Following is a brief list of common APIs in web and XML page scripting using the DOM