What Is DOM (Document Object Model)?
The Document Object Model (DOM) is an essential part of modern web development, allowing for the manipulation and interpretation of web documents. It is a standard defined by the World Wide Web Consortium (W3C) and provides a platform- and language-neutral interface for accessing and manipulating documents. It defines a standard for accessing documents – “The W3C Document Object Model 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.” It represents the structure of a document as a tree of objects, with each object representing a part of the document, such as an element, an attribute, or a piece of text. The DOM allows developers to manipulate the content, structure, and style of a document dynamically, making it an essential tool for building interactive and responsive web applications.
The W3C DOM standard is separated into 3 different parts:
- Core – standard model for all document types
- XML – standard model for XML documents
- HTML – standard model for HTML documents
It is basically the representational tree that the browser create after it read our document. It has four important elements:
- Document: It treats all the HTML documents.
- Elements: All the tags that are inside your HTML or XML turn into a DOM element.
- Text: All the tags’ content.
- Attributes: All the attributes from a specific HTML element. In the image, the attribute class=”hero” is an attribute from the element.
To find out concept of DOM element it is essential to understand concept of Dynamic HTML and DOM. When all stockholders enhanced requirements of web pages; they wanted the Web pages that can be more interactive, dynamic and lively. In addition, to reach this objective, developers required the tools and mechanisms that enables them to modify and manipulate the presentation and content of each section of web page. Therefore the concept of Dynamic HTML is created. Wikipedia defines DHTML as below –
How DOM comes into the equation?
But the main question is that how have they designed the structure of Document Object Model to meet their needs? Their solution was simple but wonderful. They used a hierarchical structure such as tree which at the root of the tree we can find document object, also each node is equivalent of a HTML elements (DOM element). This abstraction of our web page give us a great facility to access any HTML element and style sheets.
Manipulating the Document Object Model
When we create a script–whether it’s inline in a
<script> element or included in the web page by means of a script loading instruction – we can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Our DOM programming may be something as simple as displaying an alert message by using the alert() function from the window object, or it may use more sophisticated DOM methods to actually create new content.
The DOM provides a number of methods and properties for manipulating the DOM tree. For example, the “getElementById” method can be used to retrieve a specific element from the tree based on its unique ID, while the “appendChild” method can be used to add a new element to the tree. Some of the most important methods are –
In addition to manipulating the structure of a document, the DOM also allows developers to modify its content and style. For example, the “innerHTML” property can be used to set the HTML content of an element, while the “style” property can be used to modify the CSS styles applied to an element. The DOM elements have methods, as we just discussed, but they also have events. These events are responsible for making interactivity possible in our page and they are also methods. For example –
We can traverse the DOM and use some properties. With these properties, you can return elements, comments, text, and so on. Some examples are –
The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.
The browser has an understanding of the current state of the document. We can call this the DOM. Alternately we can call the DOM the standard interfaces that it exposes that allow us to query and modify the state of the document.
There are two parts to DOM Level 1 specification –
Core and HTML.
The Core DOM specification describes a general DOM that could be used to represent any structured document. The HTML DOM specification describes – how to use the Core DOM to specifically describe HTML documents and includes HTML-specific interfaces.
One of the key benefits of the DOM is that it allows developers to create highly interactive and dynamic web applications. By using the DOM, developers can create web pages that respond to user input, such as clicks, mouse movements, and keyboard input.
For example, a developer could use the DOM to create a simple to-do list application that allows users to add and remove tasks from a list. When a user clicks on the “add task” button, the DOM could be used to create a new element in the list and add it to the DOM tree. Similarly, when a user clicks on the “remove task” button, the DOM could be used to locate the element in the tree and remove it.
In addition to its use in building interactive web applications, the DOM is also an essential tool for building responsive web designs. By using the DOM, developers can create web pages that automatically adjust their layout and content based on the size and orientation of the user’s device.
For example, a developer could use the DOM to create a responsive navigation menu that automatically collapses into a dropdown menu on smaller screens, or to create a grid of images that adjusts its layout based on the available space.
What is the Difference Between the DOM and HTML Source Code?
Let’s create a very basic website. The
index.html file as below –
<!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html>
This code is the familiar HTML source of a new website skeleton.
There are two instances in which the browser-generated DOM will be different than HTML source code:
- The browser automatically fixes errors in the source code
Let’s run the above file and type the following into the console:
The console will respond with this output:
<body> <h1>Document Object Model</h1> </body>
document is an object,
body is a property of that object that we have accessed with dot notation. Submitting
document.body to the console outputs the
body element and everything inside of it.
In the console, we can change some of the live properties of the
body object on this website. We’ll edit the
style attribute, changing the background color to
red. Type this into the console:
document.body.style.backgroundColor = 'red';
After typing and submitting the above code, you’ll see the live update to the site, as the background color changes.
Switching to the Elements tab, or typing
document.body into the console again, we will see that the DOM has changed.
<body style="background-color: red;"> <h1>Document Object Model</h1> </body>
Automatically Fixing Errors:
The other instance in which the DOM might have a different output than HTML source code is when there are errors in the source code. One common example of this is the
table tag — a
tbody tag is required inside a
table, but developers often fail to include it in their HTML. The browser will automatically correct the error and add the
tbody, modifying the DOM. The DOM will sometime also fix tags that developers have not closed.
DOM has nothing to do with browser of JS exclusively. It is what it’s name suggest – D(ocument) OM. It manipulates document; more specifically XML document; and is a STANDARD; not a specific LANGUAGE. As we can use it also to manipulate HTML document also; browsers implement this STANDARD (usually with C++); to manipulate web pages. The HTML DOM is a standard object model and programming interface for HTML. The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The Document Object Model (DOM) is a standard defined by the World Wide Web Consortium (W3C) that provides a platform- and language-neutral interface for accessing and manipulating documents. It is separated into three parts: the Core DOM, which is a standard model for all document types; the XML DOM, which is a standard model for XML documents; and the HTML DOM, which is a standard model for HTML documents.
The DOM consists of four important elements: the document, which represents all HTML documents; elements, which are all the tags within an HTML or XML document; text, which is the content within the tags; and attributes, which are the attributes of a specific HTML element.