Document Object Model (DOM) is also an interface for HTML and XML documents for programming. DOM represents the page in a way where programs can change the document structure, style, and content. DOM also represents the document as nodes and objects which allow programming languages to connect to the pages.
Most modern browsers extend W3C DOM and WHATWG DOM standard for implementation. So, care must be taken at the time of using them on the web where documents may be accessed by various browsers with different DOMs.
In the code below, standard DOM specifies “getElementsByTagName” method must return a list of all the <P> elements in the document:
var paragraphs = document.getElementsByTagName(“P”);
All properties, methods, and events available for manipulating and creating web pages can be organized into objects. For example, the document object that represents the document itself, the table object that implements the special HTMLTableElement DOM interface for accessing HTML tables and so on.
API (HTML or XML page) = DOM + JS (scripting language)
Accessing the DOM
When you create a script – whether it is 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 to manipulate the document itself or to get the various elements in the web page.
DOM programming may be as simple as the following, which displays an alert message by using the alert() function from the window object.
<body onload=”window.alert(‘Welcome to my home page!’);”>
Or it will be more sophisticated DOM methods to actually create new content, as in the example below.
window.onload = function()
var heading = document.createElement(“h1”);
var heading_text = document.createTextNode(“Big Head!”);
The common APIs in web and XML page scripting using the DOM are listed below: