Introduction to the DOM

When you open a website and click a button, type into a form, or see content change without refreshing the page, JavaScript is interacting with the page.

This interaction happens through something called the DOM.

What Is the DOM?

DOM stands for Document Object Model. It is a structured representation of an HTML page that JavaScript can read and modify.

Think of the DOM as a bridge between HTML and JavaScript.

DOM in Simple Words

When a browser loads an HTML page, it converts the page into a tree-like structure.

Each element — headings, paragraphs, buttons, images — becomes an object that JavaScript can access.

Real-World Analogy

Imagine a house:

• The house is the web page
• Rooms are HTML elements
• Light switches are interactive actions

The DOM allows JavaScript to turn lights on and off by interacting with the rooms.

Why the DOM Is Important

Without the DOM, JavaScript would not be able to:

• Change text on a page
• Respond to button clicks
• Validate forms
• Create interactive web applications

The DOM makes websites dynamic and user-friendly.

Accessing the DOM

JavaScript interacts with the DOM using the document object.

document.title = "Dataplexa JavaScript Course";
  

This simple line changes the title of the web page.

DOM Is Not JavaScript

The DOM is provided by the browser, not JavaScript itself.

JavaScript uses the DOM to interact with HTML, but the DOM exists independently.

Common Beginner Mistakes

• Thinking the DOM and HTML are the same
• Trying to access elements before the page loads
• Overcomplicating simple DOM interactions

Always remember: JavaScript talks to HTML through the DOM.

Thumb Rules

• The DOM represents the entire HTML page
• JavaScript uses document to access the DOM
• Every element becomes an object in the DOM
• The DOM enables interactivity

More on the DOM Later

This lesson introduced what the DOM is and why it exists.

Actual DOM manipulation starts in the next lessons.

• Selecting elements is covered in Lesson 17 (Selecting Elements)
• Modifying page content is covered in Lesson 18 (Modifying DOM)

What Comes Next?

Now that you understand what the DOM is, the next step is learning how to select elements from it.

In the next lesson, we will learn how to select DOM elements.