HTML DOM (Document Object Model)
HTML DOM (Document Object Model) is a hierarchical representation of HTML
documents. It defines the structure and properties of elements on a webpage,
enabling JavaScript to dynamically access, manipulate, and update content,
enhancing interactivity and functionality.
Note: It is called a Logical structure because DOM doesn’t specify any relationship
between objects.
What is DOM?
DOM, or Document Object Model, is a programming interface that represents
structured documents like HTML and XML as a tree of objects. It defines how to
access, manipulate, and modify document elements using scripting languages like
JavaScript.
So basically Document Object Model is an API that represents and interacts with
HTML or XML documents.
The DOM is a W3C (World Wide Web Consortium) standard and it defines a
standard for accessing documents.
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 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
DOM provides various methods that allows users to interact with and manipulate
the document. Some commonly used DOM methods are:
Method Description
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>
<!-- Finding the HTML Elements by their Id in DOM -->
<p id="intro">
A Computer Science portal for SAM.
</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 =
"Welcome to Srusti Academy of Management: " + 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>
HTML elements in tree-like structure
What DOM is not?
The Document Object Model is not a binary description where it does not
define any binary source code in its interfaces.
The Document Object Model is not used to describe objects in XML or
HTML whereas the DOM describes XML and HTML documents as objects.
The Document Object Model is not represented by a set of data structures; it
is an interface that specifies object representation.
The Document Object Model does not show the criticality of objects in
documents i.e it doesn’t have information about which object in the document
is appropriate to the context and which is not.
Example: This example illustrates the dom-manipulation
using getElementById() Method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation</title>
</head>
<body>
<label>Enter Value 1: </label>
<input type="text" id="val1" />
<br />
<br />
<label>Enter Value 2: </label>
<input type=".text" id="val2" />
<br />
<button onclick="getAdd()">Click To Add</button>
<p id="result"></p>
<script type="text/javascript">
function getAdd() {
// Fetch the value of input with id val1
const num1 = Number(document.getElementById("val1").value);
// Fetch the value of input with id val2
const num2 = Number(document.getElementById("val2").value);
const add = num1 + num2;
console.log(add);
// Displays the result in paragraph using dom
document.getElementById("result").innerHTML = "Addition : " + add;
// Changes the color of paragraph tag with red
document.getElementById("result").style.color = "red";
}
</script>
</body>
</html>
