DOM Tree

Introduction

The DOM represents an HTML document as a tree of nodes, where each node corresponds to an element, text, attribute, or comment.

Visual Explanation

flowchart TD
    A["document"]
    B["&lt;html&gt;"]
    C["&lt;head&gt;"]
    D["&lt;body&gt;"]
    E["&lt;title&gt;"]
    F["&lt;h1&gt;"]
    G["&lt;p&gt;"]

    A --> B
    B --> C
    B --> D
    C --> E
    D --> F
    D --> G

The Document Object

// The DOM starts with the document object
console.log(document); // The entire HTML document
console.log(document.head); // <head> element
console.log(document.body); // <body> element
console.log(document.title); // Page title

Node Types

Node Type	Example
Element node	`<div>`, `<p>`, `<h1>`
Text node	”Hello World” inside an element
Comment node	`<!-- comment -->`
Document node	The `document` object itself

Summary

DOM is a tree of nodes representing the HTML document
document is the root entry point
Node types: element, text, comment, document
Each element node can have child nodes

DOM Tree

DOM Tree

Introduction

Visual Explanation

The Document Object

Node Types

Summary

Further Reading