What is DOM?

You might hear about the word DOM Manipulation if you are a beginner web developer. When you see some videos on YouTube or search on Google, you end up getting the full form which is the Document Object Model ??. And you might think that's all the story of DOM might be. But that's not the case my dear friend. Let's see What is DOM, Who created it, and Where it is useful. After reading this article you'll get Brid's eye-view of DOM.

What is Document Object Model

DOM stands for Document Object Model. The DOM defines standards for accessing documents. It is standardized by W3C (World Wide Consortium). The DOM is a Platform and Programming language independent interface. It allows programs to dynamically Access, Update, and Style the content and Structure the Document.

World Wide Consortium standardizes DOM in 3 parts:

1. Core DOM - Standard Model For all Document Types.
2. HTML DOM - Standard Model For HTML Documents.
3. XML DOM - Standard Model For XML Documents.

Between these three, HTML DOM is widely known and used.

Basically, DOM represents the structure of a document as a tree-like model, where each node in a tree represents a part of the document. (e.g. an element, attribute, or text)

How DOM Works

When a web page is loaded in a browser, the browser creates a DOM representation of the page, which can then be accessed and modified using programming languages like Javascript. This enables developers to interact with the web page, update its content, change its styles, and respond to user actions dynamically.

The DOM is a critical part of front-end web development, as it enables the creation of interactive and dynamic web pages. HTML DOM defines:

• The HTML elements as Objects.
• The Properties of all HTML elements.
• The methods to access all HTML elements.
• The events for all HTML elements.

With DOM, Javascript gets all the power it needs to create dynamic HTML and CSS. With the help of DOM:

• Javascript can change all the HTML elements, attributes, and CSS styles on the page.
• Javascript can remove existing HTML elements and attributes.
• Javascript can add new HTML elements and attributes.
• Javascript can react to all existing HTML events on the page.
• Javascript can create new HTML events on the page.

History of DOM

In the initial days of the Internet and Browser, there was no way of accessing Browser Documents. By browser documents I mean the Structure and Metadata of Web Pages like how many elements are there on the web page and what is their structure etc. As the internet evolved, soon developers realized that they would need Standards and Specifications to access the Browser Document.

The initial concept of DOM emerged in the mid-1990s. Its Standards and Specifications have undergone several revisions and updates over the years to keep up with the evolving web technologies. In September 2021 the most recent version of the DOM Specification was launched.

Conclusion

The article provides an overview of DOM (Document Object Model), its importance in web development, and its history. Here's a summarized version:

What is DOM?

• DOM stands for Document Object Model.
• It defines standards for accessing documents and is standardized by W3C (World Wide Consortium).
• DOM is a platform and programming language-independent interface.
• It allows programs to dynamically access, update, and style the content and structure of a document.
• DOM is divided into three parts: Core DOM (for all document types), HTML DOM (for HTML documents), and XML DOM (for XML documents), with HTML DOM being the most widely used.

How DOM Works:

• When a web page loads in a browser, the browser creates a DOM representation of the page.
• Developers can access and modify this representation using programming languages like JavaScript.
• DOM enables interaction with web pages, content updates, style changes, and dynamic responses to user actions.
• HTML DOM defines HTML elements as objects, their properties, methods to access them, and events associated with them.
• JavaScript leverages DOM to manipulate HTML and CSS dynamically, including changing elements, attributes, and styles, adding or removing elements, and reacting to events.

History of DOM:

• Initially, there was no way to access browser documents (web page structures and metadata).
• Developers realized the need for standards and specifications to access browser documents.
• The concept of DOM emerged in the mid-1990s.
• DOM standards and specifications have evolved over the years to keep up with changing web technologies.
• As of September 2021, the most recent version of the DOM specification was launched.

In essence, DOM is a crucial aspect of front-end web development that enables the creation of interactive and dynamic web pages by providing a structured way to interact with and manipulate web page content and structure.

So, guys, That’s all you need to know about DOM. Please let me know if I miss something. I’ll be happy to learn from you. Until then Keep Loving, Keep Coding. I’ll surely catch you up in the next article. Jai Hind, Vande Mataram.

Sounds too complicated? Read the Simplified Versions

• Pass by Value & Pass by Reference - Simplified
• JavaScript Code Execution - Simplified
• React Element - Simplified

Read more about React & JavaScript

• What is React
• Datatypes in JavaScript
• Variables in JavaScript
• Scope in JavaScript
• Hoisting in JavaScript
• Working of JavaScript
• Pass by Value & Pass by Reference - Simplified
• JavaScript Code Execution - Simplified

Follow me for more such content

• My Site
• My Blogs
• LinkedIn
• Instagram
• Twitter
• Stackoverflow
• Github
• AWS Community