3.2.1 HTML Document Object Model

This topic explains the Document Object Model (DOM), a standard that represents an HTML document as a tree of nodes, enabling browsers to interpret and display webpages correctly.

Definition

HTML Document Object Model (DOM): The Document Object Model (DOM) is a standard which provides mutual interpretation where grammar of a language can be associated with and can coexist on various operating systems. In HTML, every file is interpreted as a DOM-tree where hierarchy of the said file is defined.

Core Concept

The DOM is like a family tree for a webpage. Just as a family tree shows how grandparents, parents, and children are related, the DOM shows how every element in an HTML document is related—which element contains which other elements. At the top is the document, then html, which branches into head and body, and each of those branches further into titles, headings, paragraphs, and so on. This tree structure allows browsers to understand the hierarchy of a webpage and display it correctly.

Detailed Explanation

What is the DOM?

The Document Object Model (DOM) is a standard which provides mutual interpretation where grammar of a language can be associated with and can coexist on various operating systems. In HTML, every file is interpreted as a DOM-tree where hierarchy of the said file is defined.

• Different elements which comprise a webpage like text, images, etc. are all part of DOM.
• When a browser reads an HTML file, it creates the respective DOM automatically and correspondingly correctly displays the page.
• As discussed in the last chapter, a tree consists of nodes and links, so is the case here where every object and component of HTML is treated as a node.
• Hence, the file, components, features, script, and even comments which exist in a web page are all treated as objects by HTML.

DOM Tree Structure

The DOM tree has a hierarchical structure:

Document: Comes at the top of the tree for the whole webpage.

HTML: Thereafter comes the 'html' node which contains the HTML, which has two sub-nodes:

• Head: Holds the title of the page and other metadata.
• Body: Where the content of HTML are placed like heading, paragraph, unordered list, etc.

Example DOM Tree:

``` Document └── html ├── head │ └── title │ └── "My Academy" └── body ├── h1 │ └── "Let's Learn" └── a ├── href = "www.nbf.org.com" └── text = "Visit NBF" ```

How the DOM Works

• Browser Reads HTML: When a browser loads an HTML file, it reads the code.
• DOM Creation: The browser automatically creates a DOM tree from the HTML.
• Rendering: The browser uses the DOM to correctly display the page.
• Interaction: JavaScript can access and manipulate the DOM to change the page dynamically.

Why is the DOM Important?

• Structure: Provides a clear hierarchical structure of the webpage.
• Accessibility: Allows programs (like JavaScript) to access and modify webpage content.
• Cross-Platform: Works on various operating systems and browsers.
• Dynamic Updates: Enables dynamic changes to the page without reloading.
• Standardization: Provides a standard way to represent and interact with web documents.

Nodes in the DOM

Every part of the HTML document is a node:

• Document Node: The root of the tree.
• Element Nodes: HTML tags like `<html>`, `<head>`, `<body>`, `<h1>`, `<p>`, etc.
• Text Nodes: The text content inside elements.
• Attribute Nodes: Attributes like `href`, `src`, `class`, etc.
• Comment Nodes: HTML comments.

Intermediate Level

The Document Object Model (DOM) is a standard representation of an HTML document as a tree of nodes. The root is the document, which contains the html node, which branches into head (metadata, title) and body (visible content). Every element, attribute, text, and comment is a node. When a browser loads an HTML file, it automatically creates the DOM and renders the page based on it. The DOM allows JavaScript to access and manipulate webpage content dynamically. It provides a standard, cross-platform way to represent and interact with web documents.

Important Points

• - DOM = Document Object Model.
• - Represents HTML as a tree of nodes.
• - Root: document → html → head & body.
• - Every element, text, attribute, comment is a node.
• - Browser creates DOM automatically when reading HTML.
• - DOM enables dynamic interaction via JavaScript.
• - Standard for cross-platform web development.

Remember

• - DOM: Tree of nodes.
• - Root: Document → HTML → Head & Body.
• - Nodes: Elements, text, attributes, comments.
• - Browser: Creates DOM automatically.
• - JavaScript: Uses DOM to modify pages.
• - **DOM = Standard for web documents.**

Common Mistakes

• - Confusing DOM with HTML source code: The DOM is the browser's internal representation; HTML is the text you write.
• - Thinking DOM is only for JavaScript: The DOM is a standard; JavaScript is one way to interact with it.
• - Forgetting that text and attributes are nodes: Everything in the document is a node.
• - Assuming DOM is the same in all browsers: Modern browsers follow standards, but older ones may differ.
• - Mixing up DOM and CSSOM: DOM represents HTML; CSSOM represents CSS.

Quick Revision

The Document Object Model (DOM) is a standard that represents an HTML document as a tree of nodes. The root is the document, which contains html, branching into head and body. Every element, text, attribute, and comment is a node. When a browser loads an HTML file, it automatically creates the DOM and renders the page. The DOM allows JavaScript to dynamically access and modify webpage content. It provides a standard, cross-platform way to represent and interact with web documents.

60-Second Revision

• DOM: Document Object Model.
• Representation: Tree of nodes.
• Root: Document → HTML → Head & Body.
• Nodes: Elements, Text, Attributes, Comments.
• Browser: Creates DOM automatically.
• JavaScript: Uses DOM to modify pages.
• Key Point: DOM is the browser's internal tree representation of HTML, enabling rendering and dynamic interaction.