DOM

Document Object Model is an API that represents and interacts with HTML
or XML documents.

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 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, the JavaScript gets access to
HTML as well as CSS of the web page and can also add behavior to the HTML
elements.
Why DOM is 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 interprets DOM easily, using it as a bridge
to access and manipulate the elements i.e javascript can not understand the
tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM.
Now, Javascript can access 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 DOM
Let’s see the properties of the document object that can be accessed and
modified by the document object.
Representation of the DOM

• 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:
• write(“string”): Writes the given string on the document.
• getElementById(): returns the element having the given id value.
• getElementsByName(): returns all the elements having the given
name value.
 • getElementsByTagName(): returns all the elements having the
given tag name.
• getElementsByClassName(): returns all the elements having the
given class name.
Example: In this example, We use HTML element id to find the DOM HTML
element.

• HTML

<!DOCTYPE html>
<html>

<body>
<h2>BCA going to read DOM</h2>

<!-- Finding the HTML Elements by their Id in DOM -->

<p id="intro">A Computer Science portal for geeks.</p>
<p>This example illustrates the <b>getElementById</b> method.</p>
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"WEB introduction is: " + element.innerHTML;
</script>
</body>

</html>

Example: This example describes the representation of the HTML elements

in the tree structure.

• html

<table>
<ROWS>
<tr>
<td>Car</td>
<td>Scooter</td>
</tr>
<tr>
<td>MotorBike</td>
<td>Bus</td>
</tr>
 </ROWS>
</table>

Properties of document object

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

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:

Method Description

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with newline

character at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.
 getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.

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.

1. <script type="text/javascript">
2. function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome: "+name);
5. }
6. </script>
7.
8. <form name="form1">
9. Enter Name:<input type="text" name="name"/>
10. <input type="button" onclick="printvalue()" value="print name"/>
11. </form>