The DOM (Document Object Model) is a tree-structured API that represents an HTML document. JavaScript uses it to read and modify content, structure, and styles.

Syntax

// The document is the root of the DOM tree
console.log(document.title);
console.log(document.body.children);

Deep Dive Course

The **DOM** is a live, tree-structured representation of an HTML page maintained by the browser. JavaScript can **read** (access content, attributes, styles) and **write** (add/remove/modify elements). The **document** object is the entry point. Every HTML tag becomes a **node** in the tree.

1Understanding What is the DOM

The DOM is a live, tree-structured representation of an HTML page maintained by the browser. JavaScript can read (access content, attributes, styles) and write (add/remove/modify elements). The document object is the entry point. Every HTML tag becomes a node in the tree.

💡

DOM manipulation is relatively slow compared to JavaScript operations. Batch your DOM changes (document fragments, class toggling) to minimize layout recalculation.

editor.html

// Accessing the DOM
console.log(document.title);      // page title
console.log(document.URL);        // current URL
console.log(document.body);       // <body> element

// Tree navigation
const heading = document.querySelector('h1');
console.log(heading.textContent); // heading text

localhost:3000

2Practical Example

Here is a real-world application of What is the DOM showing how it is used in production JavaScript code.

editor.html

// DOM tree structure
const list = document.getElementById('myList');
console.log(list.children.length);     // number of <li>
console.log(list.parentElement.id);    // parent's id
console.log(list.firstElementChild);   // first <li>

localhost:3000

3Best Practices

Follow these guidelines when working with What is the DOM:

1. Cache DOM references to avoid repeated lookups

2. Use document fragments for batch insertion

3. Prefer classList over manually manipulating className string

⚠️

Tip: DOM manipulation is relatively slow compared to JavaScript operations. Batch your DOM changes (document fragments, class toggling) to minimize layout recalculation.

editor.html

// Accessing the DOM
console.log(document.title);      // page title
console.log(document.URL);        // current URL
console.log(document.body);       // <body> element

// Tree navigation
const heading = document.querySelector('h1');
console.log(heading.textContent); // heading text

localhost:3000

Examples

Example 01Basic Usage

// Accessing the DOM
console.log(document.title);      // page title
console.log(document.URL);        // current URL
console.log(document.body);       // <body> element

// Tree navigation
const heading = document.querySelector('h1');
console.log(heading.textContent); // heading text

Example 02Advanced Example

// DOM tree structure
const list = document.getElementById('myList');
console.log(list.children.length);     // number of <li>
console.log(list.parentElement.id);    // parent's id
console.log(list.firstElementChild);   // first <li>

Best Practices

Cache DOM references to avoid repeated lookups
Use document fragments for batch insertion
Prefer classList over manually manipulating className string

Interview Question

What is the difference between the DOM and HTML?▼

Hint: Source code vs live object model.

HTML is the source markup text. The DOM is the browser's live, object-oriented representation of that HTML. JavaScript interacts with the DOM, not the HTML string. When JS modifies the DOM, the page updates visually — the original HTML source file doesn't change.

Exercises

MediumPractice using What is the DOM in a real scenario.

View Solution

// Accessing the DOM
console.log(document.title);      // page title
console.log(document.URL);        // current URL
console.log(document.body);       // <body> element

// Tree navigation
const heading = document.querySelector('h1');
console.log(heading.textContent); // heading text

Frequently Asked Questions

What is the difference between the DOM and HTML?▼

Related Functions

Selection-MethodsElements-ManipulationEventsElements-Creation