JavaScript

DOM Basics

Understand the Document Object Model (DOM)! Learn how JavaScript interacts with HTML to create dynamic web pages.

By TechCoder TeamLast updated: 2026-06-02
In a Nutshell

Understand the Document Object Model (DOM)! Learn how JavaScript interacts with HTML to create dynamic web pages. This hands-on tutorial focuses on practical implementation of dom basics concepts.

DOM Basics

Welcome to the browser! Until now, we've been writing JavaScript logic. Now, we'll use JavaScript to control the web page itself.

1. What is the DOM? 🌳

What is it? DOM stands for Document Object Model. It is a tree-like representation of your HTML structure.

Why use it? HTML is just static text. The DOM is a "live" object that JavaScript can interact with. It allows you to:

  • Change text and content.
  • Modify styles (colors, fonts).
  • Add or remove HTML elements.
  • Respond to user clicks.

How it works: When a browser loads a web page, it converts your HTML into the DOM Tree.

2. The document Object 📄

The document object is your main entry point to the DOM. It represents the entire web page.

JAVASCRIPT PLAYGROUND
⏳ Loading editor…

3. DOM Nodes 🌿

Everything in the DOM is a Node. There are different types:

  1. Element Nodes: The HTML tags (e.g., <div>, <h1>, <p>).
  2. Text Nodes: The actual text inside the tags (e.g., "Hello World").
  3. Attribute Nodes: The attributes on tags (e.g., class="container", src="image.jpg").

Navigating the Tree: You can move up, down, and sideways in the tree.

JAVASCRIPT PLAYGROUND
⏳ Loading editor…

4. Window vs. Document 🪟

It's easy to confuse them!

  • window: Represents the browser window (tabs, history, scrolling). It is the global object.
  • document: Represents the web page content (HTML). It is a property of the window (window.document).
JAVASCRIPT PLAYGROUND
⏳ Loading editor…

Practical Example: Inspecting the DOM 🔍

Open your browser's Developer Tools (F12 or Right Click -> Inspect).

  • Go to the Elements tab: This IS the DOM!
  • Go to the Console tab: Type document.body.style.background = "red" and hit Enter. You just manipulated the DOM!

AI Mentor

Confused about "Document Object Model (DOM), DOM tree structure, nodes, and the document object"? Ask our AI mentor for a simplified explanation.

Quiz

Quiz

Question 1 of 4

What does DOM stand for?

Data Object Model
Document Object Model
Document Oriented Module
Digital Object Method

Key Takeaways

✅ DOM turns HTML into a tree of objects.
✅ document is the root of the page content.
✅ Nodes are the individual parts (Elements, Text).
✅ window is the browser; document is the page.

What's Next?

Now that we know what the DOM is, let's learn how to Select and Modify Elements to change the page!

Keep coding! 🚀