A web page is a document which can be displayed in the web browsers or as the HTML source but ultimately both are the same document. Document Object Model (DOM) represents the same document to be manipulated. An object-oriented representation of any web page is called DOM. This web page can be modified with JavaScript.
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.
The short example above is written in JavaScript which uses the DOM to access the document and its elements. JavaScript language wouldn’t have any model or HTML documents, XML documents or their component parts (e.g. elements) without DOM, though DOM is not a programming language.
Every element in a document (the head, tables within the document, table headers, text within the table cells) is part of DOM. They can all be accessed and manipulated using a scripting language like JavaScript for the purpose of DOM.
JavaScript and the DOM were tightly intertwined at the starting, but they evolved into separate entities afterward. The page content is stored in the DOM which may be accessed and manipulated via JavaScript, which may lead us to the following equation:
API (HTML or XML page) = DOM + JS (scripting language)
DOM was designed to be totally independent of any particular programming language. Programming languages which make the structural representation of the document available from a single, consistent API. Though our focus is exclusively on JavaScript, implementations of the DOM can be built for any language.
Accessing the DOM
We don’t have to do anything special, to begin with, the DOM because every web browser uses some document object model to make web pages accessible via JavaScript.
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.
<html>
<head>
<script>
window.onload = function()
{
var heading = document.createElement(“h1”);
var heading_text = document.createTextNode(“Big Head!”);
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>
The common APIs in web and XML page scripting using the DOM are listed below:
- document.getElementById(id)
- document.getElementsByTagName(name)
- document.createElement(name)
- parentNode.appendChild(node)
- element.innerHTML
- element.setAttribute()
- element.getAttribute()
- element.addEventListener()
- window.content
- window.onload
- console.log()
- window.scrollTo()
Tech Enthusiast and UI Developer at Openweb Solutions
