JavaScript DOM Tutorial

HTML5ANDCSS3Tools and Tutorials

JavaScript DOM Tutorial - HTML5ANDCSS3

JavaScript DOM

Written by Swapnil RajaPublished 24 Aug 2026

The DOM is the browser's model of a page, and JavaScript uses it to read and change the page.

DOM stands for Document Object Model.

When a page loads, the browser turns your HTML into a tree of objects that JavaScript can reach.

Example

javascript

document.body.innerHTML = '<h1 id="title">Hello</h1>';

const title = document.getElementById("title");

console.log(title.textContent);

The output is Hello, read straight out of the page.

What is the DOM?

The DOM is a tree of objects, one for each part of your HTML.

PreviousJavaScript Object Constructors NextJavaScript DOM Selectors

Example

javascript

document.body.innerHTML = '<p id="demo">Hi</p>';

const p = document.getElementById("demo");
p.textContent = "Changed by JavaScript";
p.style.color = "red";

console.log(p.textContent);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript DOM</title>
</head>
<body>

  <h1>JavaScript DOM</h1>

  <p id="demo">Original text</p>

  <script>
    const p = document.getElementById("demo");

    p.textContent = "Changed by JavaScript";
    p.style.color = "teal";
  </script>

</body>
</html>

JavaScript DOM

Example

What is the DOM?

Syntax

The DOM is Not Your HTML File

Example

A Tree of Nodes

Example

What You Can Do With It

Example

document.body and document.title

Example

Scripts Run in Order

Example

Complete Example

Try It Yourself

Important Points

Conclusion