🌐JavaScript

JavaScript DOM Introduction

Updated 2026-05-12

30 min read

JavaScript DOM Introduction

Introduction

The Document Object Model, commonly known as the DOM, is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as a tree of nodes, where each node is an object representing a part of the document.

Understanding the DOM is crucial for any JavaScript developer working on web applications, as it allows you to manipulate HTML elements dynamically, handle events, and create interactive user interfaces.

What is the Document Object Model (DOM)?

The DOM is not just a single model; it's a collection of APIs that provide a structured representation of the document. This representation allows programs to access and update the content, structure, and style of a web page.

Real-World Analogy

Think of the DOM as a family tree. Just like a family tree has a root node (the grandparent), branches (parents), and leaves (children), the DOM represents an HTML document with nodes for each element, attribute, and text within the document.

The DOM Tree

The DOM represents an HTML document as a tree structure, where:

Nodes: Each part of the document is represented as a node. Nodes can be elements, attributes, or text.
Elements: These are the main building blocks of the document, such as <div>, <p>, etc.
Attributes: These are properties of elements, like id and class.
Text: This is the content within HTML tags.

Example DOM Tree

Consider the following simple HTML:

HTML

1<div id="container">
2<h1>Hello World</h1>
3<p>This is a paragraph.</p>
4</div>

This can be represented as a DOM tree like this:

- Document
  - Element: div (id=container)
    - Element: h1
      - Text: Hello World
    - Element: p
      - Text: This is a paragraph.

Accessing the DOM

You can access and manipulate the DOM using JavaScript. Here are some basic examples:

Example 1: Accessing an Element by ID

JavaScript

1// script.js
2const container = document.getElementById('container');
3console.log(container);

Output

Here, document.getElementsByTagName('p') returns a collection of all <p> elements.

Example 3: Accessing Elements by Class Name

JavaScript

1// script.js
2const elements = document.getElementsByClassName('example');
3console.log(elements);

Output

In this example, the text content of the <h1> element with the ID "heading" is changed to "New Heading".

Example 5: Adding a New Element

JavaScript

1// script.js
2const newParagraph = document.createElement('p');
3newParagraph.textContent = 'This is a new paragraph.';
4document.body.appendChild(newParagraph);

Output

In this example, a click event listener is added to a button. When the button is clicked, an alert box with the message "Button clicked!" appears.

Practical Example

Let's create a simple web application that changes the background color of a page when a button is clicked:

HTML

1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>DOM Example</title>
8</head>
9<body>
10<button id="colorButton">Change Background Color</button>
11<script src="script.js"></script>
12</body>
13</html>

JavaScript

1// script.js
2const button = document.getElementById('colorButton');
3button.addEventListener('click', function() {
4const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
5document.body.style.backgroundColor = randomColor;
6});

Explanation

HTML Structure: The HTML file contains a button with the ID "colorButton".
JavaScript Logic:
- The script accesses the button using document.getElementById('colorButton').
- An event listener is added to the button to listen for click events.
- When the button is clicked, a random color is generated and applied as the background color of the body.

Summary

DOM: A programming interface for web documents that represents the document as a tree structure.
Nodes: Elements, attributes, and text are represented as nodes in the DOM tree.
Accessing Elements: Use methods like getElementById, getElementsByTagName, and getElementsByClassName to access elements.
Manipulating Elements: Change text content, create new elements, and modify styles.
Event Handling: Add event listeners to handle user interactions.

What's Next?

In the next topic, we will explore how to select DOM elements using various methods. This will allow you to target specific elements more precisely and perform complex manipulations. Stay tuned!

🌐JavaScript

JavaScript DOM Introduction

Updated 2026-05-12

30 min read

JavaScript DOM Introduction

Introduction

What is the Document Object Model (DOM)?

Real-World Analogy

The DOM Tree

The DOM represents an HTML document as a tree structure, where:

Nodes: Each part of the document is represented as a node. Nodes can be elements, attributes, or text.
Elements: These are the main building blocks of the document, such as <div>, <p>, etc.
Attributes: These are properties of elements, like id and class.
Text: This is the content within HTML tags.

Example DOM Tree

Consider the following simple HTML:

HTML

1<div id="container">
2<h1>Hello World</h1>
3<p>This is a paragraph.</p>
4</div>

This can be represented as a DOM tree like this:

- Document
  - Element: div (id=container)
    - Element: h1
      - Text: Hello World
    - Element: p
      - Text: This is a paragraph.

Accessing the DOM

You can access and manipulate the DOM using JavaScript. Here are some basic examples:

Example 1: Accessing an Element by ID

JavaScript

1// script.js
2const container = document.getElementById('container');
3console.log(container);

Output

Here, document.getElementsByTagName('p') returns a collection of all <p> elements.

Example 3: Accessing Elements by Class Name

JavaScript

1// script.js
2const elements = document.getElementsByClassName('example');
3console.log(elements);

Output

In this example, the text content of the <h1> element with the ID "heading" is changed to "New Heading".

Example 5: Adding a New Element

JavaScript

1// script.js
2const newParagraph = document.createElement('p');
3newParagraph.textContent = 'This is a new paragraph.';
4document.body.appendChild(newParagraph);

Output

In this example, a click event listener is added to a button. When the button is clicked, an alert box with the message "Button clicked!" appears.

Practical Example

Let's create a simple web application that changes the background color of a page when a button is clicked:

HTML

1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>DOM Example</title>
8</head>
9<body>
10<button id="colorButton">Change Background Color</button>
11<script src="script.js"></script>
12</body>
13</html>

JavaScript

1// script.js
2const button = document.getElementById('colorButton');
3button.addEventListener('click', function() {
4const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
5document.body.style.backgroundColor = randomColor;
6});

Explanation

HTML Structure: The HTML file contains a button with the ID "colorButton".
JavaScript Logic:
- The script accesses the button using document.getElementById('colorButton').
- An event listener is added to the button to listen for click events.
- When the button is clicked, a random color is generated and applied as the background color of the body.

Summary

DOM: A programming interface for web documents that represents the document as a tree structure.
Nodes: Elements, attributes, and text are represented as nodes in the DOM tree.
Accessing Elements: Use methods like getElementById, getElementsByTagName, and getElementsByClassName to access elements.
Manipulating Elements: Change text content, create new elements, and modify styles.
Event Handling: Add event listeners to handle user interactions.

What's Next?

In the next topic, we will explore how to select DOM elements using various methods. This will allow you to target specific elements more precisely and perform complex manipulations. Stay tuned!