Document Object Model

Document Object Model :

• The document object represents the whole html document.

• HTML DOM (Document Object Model) is a hierarchical representation of HTML documents.

• When html document is loaded in the browser, it becomes a document object.

• It is the root element that represents the html document.

• It has properties and methods.

• By the help of document object, we can add dynamic content to our web page.

As mentioned earlier, it is the object of window. So

1. window.document

   or

2. document

According to W3C - "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C Dom standard is divided into three different parts:

• Core DOM – standard model for all document types

• XML DOM – standard model for XML documents

• HTML DOM – standard model for HTML documents

HTML DOM :

• HTML DOM is a standard object model and programming interface for HTML documents.

• HTML DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document.

• With HTML DOM, we can easily access and manipulate tags, IDs, classes, attributes, or elements of HTML using commands or methods provided by the document object.

Using DOM JavaScript we get access to HTML as well as CSS of the web page and can also modify the behavior of the HTML elements.

Why is DOM Required?

• HTML is used to structure the web pages and Javascript is used to add behavior to our web pages.

• When an HTML file is loaded into the browser, the JavaScript can not understand the HTML document directly.

• So it interprets and interacts with the Document Object Model (DOM), which is created by the browser based on the HTML document.

• DOM is basically the representation of the same HTML document but in a tree-like structure composed of objects. JavaScript can not understand the tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM.

• JavaScript interprets DOM easily, using it as a bridge to access and manipulate the elements. DOM Javascript allow access to each of the objects (h1, p, etc) by using different functions.

The Document Object Model (DOM) is essential in web development for several reasons:

• Dynamic Web Pages: It allows you to create dynamic web pages. It enables the JavaScript to access and manipulate page content, structure, and style dynamically which gives interactive and responsive web experiences, such as updating content without reloading the entire page or responding to user actions instantly.

• Interactivity: With the DOM, you can respond to user actions (like clicks, inputs, or scrolls) and modify the web page accordingly.

• Content Updates: When you want to update the content without refreshing the entire page, the DOM enables targeted changes making the web applications more efficient and user-friendly.

• Cross-Browser Compatibility: Different browsers may render HTML and CSS in different ways. The DOM provides a standardized way to interact with page elements.

• Single-Page Applications (SPAs): Applications built with frameworks such as React or Angular, heavily rely on the DOM for efficient rendering and updating of content within a single HTML page without reloading the full page.

Structure of DOM :

• DOM can be thought of as a Tree or Forest (more than one tree).

• The term structure model is sometimes used to describe the tree-like representation of a document.

• Each branch of the tree ends in a node, and each node contains objects Event listeners can be added to nodes and triggered on an occurrence of a given event.

• One important property of DOM structure models is structural isomorphism:

• if any two DOM implementations are used to create a representation of the same document, they will create the same structure model, with precisely the same objects and relationships.

Why DOM is called an Object Model ?

Documents are modeled using objects, and the model includes not only the structure of a document but also the behavior of a document and the objects of which it is composed like tag elements with attributes in HTML.

Properties of document object :

Let's see the properties of document object that can be accessed and modified by the document object.

• Window Object: Window Object is object of the browser which is always at top of the hierarchy. It is like an API that is used to set and access all the properties and methods of the browser. It is automatically created by the browser.

• Document object: When an HTML document is loaded into a window, it becomes a document object. The ‘document’ object has various properties that refer to other objects which allow access to and modification of the content of the web page. If there is a need to access any element in an HTML page, we always start with accessing the ‘document’ object. Document object is property of window object.

• Form Object: It is represented by form tags.

• Link Object: It is represented by link tags.

• Anchor Object: It is represented by a href tags.

• Form Control Elements: Form can have many control elements such as text fields, buttons, radio buttons, checkboxes, etc.

Methods of document object :

We can access and change the contents of document by its methods.

The important methods of document object are as follows:

Accessing field value by document object :

In this example, we are going to get the value of input text by user. Here, we are using document.form1.name.value to get the value of name field.Here, document is the root element that represents the html document.

form1 is the name of the form.

name is the attribute name of the input text.

value is the property, that returns the value of the input text.

Let's see the simple example of document object that prints name with welcome message.

<script type="text/javascript">  
function printvalue(){  
var name=document.form1.name.value;  
alert("Welcome: "+name);  
}  
</script>  

<form name="form1">  
Enter Name:<input type="text" name="name"/>  
<input type="button" onclick="printvalue()" value="print name"/>  
</form>

Output:

Difference between DOM & BOM:

Whats Next ?

Methods of document object