The soul of a web page is HTML, the beauty is CSS, and the intelligence is JavaScript.
But how does JavaScript control the webpage?

Through the DOM.

What is DOM?

DOM stands for:

Document Object Model

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

JavaScript can then:

  • Access elements
  • Change content
  • Change styles
  • Add or remove elements
  • Handle events

Think of DOM like a living map of the webpage.

Visual Understanding of DOM

Example HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello</h1>
    <p>Welcome</p>
</body>
</html>

DOM Tree:

Document
   |
  html
  /   \
head   body
 |      /  \
title  h1   p

Every tag becomes an object (node).

JavaScript talks to these nodes.

Why DOM Manipulation is Important

Without DOM manipulation:

  • Websites would be static
  • No dynamic updates
  • No animations
  • No interactive forms
  • No live changes

Modern websites like YouTube, Facebook, Amazon — all rely heavily on DOM manipulation.

Basic DOM Methods

1. Selecting Elements

Before changing anything, JavaScript must find the element.

A. getElementById()

Selects element using ID.

HTML

<h1 id="title">Hello World</h1>

JavaScript

let element = document.getElementById("title");

console.log(element);

Output

<h1 id="title">Hello World</h1>

B. getElementsByClassName()

Selects elements using class.

HTML

<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>

JavaScript

let items = document.getElementsByClassName("text");

console.log(items);

Returns HTMLCollection.

C. getElementsByTagName()

Selects using tag name.

let paragraphs = document.getElementsByTagName("p");

D. querySelector()

Selects first matching element.

let item = document.querySelector(".text");

E. querySelectorAll()

Selects all matching elements.

let items = document.querySelectorAll(".text");

Returns NodeList.

Difference Between querySelector and querySelectorAll

Method Returns
querySelector() First matching element
querySelectorAll() All matching elements

Changing Content

2. innerHTML

Changes HTML inside element.

HTML

<div id="box"></div>

JavaScript

document.getElementById("box").innerHTML = "<h1>Hello</h1>";

Result

<h1>Hello</h1>

3. innerText

Changes text only.

document.getElementById("box").innerText = "Welcome";

innerHTML vs innerText

Feature innerHTML innerText
Supports HTML tags Yes No
Plain text No Yes

Changing Styles

4. style Property

HTML

<p id="demo">Hello</p>

JavaScript

let p = document.getElementById("demo");

p.style.color = "red";
p.style.fontSize = "30px";
p.style.backgroundColor = "yellow";

Important Rule

CSS:

background-color

JavaScript:

backgroundColor

This is called:

camelCase notation

Changing Attributes

5. setAttribute()

element.setAttribute("class", "active");

6. getAttribute()

let value = element.getAttribute("class");

7. removeAttribute()

element.removeAttribute("class");

Creating New Elements

8. createElement()

let newElement = document.createElement("h1");

9. Adding Content

newElement.innerText = "New Heading";

10. appendChild()

Adds element inside another element.

HTML

<div id="container"></div>

JavaScript

let heading = document.createElement("h1");

heading.innerText = "Welcome";

document.getElementById("container").appendChild(heading);

Removing Elements

11. remove()

element.remove();

Example

document.getElementById("demo").remove();

Event Handling in DOM

DOM becomes powerful with events.

What is an Event?

An action performed by user.

Examples:

  • Click
  • Typing
  • Mouse movement
  • Key press
  • Submit

12. onclick Event

HTML

<button onclick="showMessage()">Click</button>

JavaScript

function showMessage() {
    alert("Button clicked");
}

Better Modern Way

Use addEventListener()

13. addEventListener()

HTML

<button id="btn">Click Me</button>

JavaScript

let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
    alert("Clicked");
});

Why addEventListener is Better

onclick addEventListener
Old method Modern method
One event at a time Multiple events possible
Less flexible More powerful

Changing CSS Classes

14. classList

Add Class

element.classList.add("active");

Remove Class

element.classList.remove("active");

Toggle Class

element.classList.toggle("dark");

Very useful for:

  • Dark mode
  • Menus
  • Animations

Traversing the DOM

Moving between elements.

Parent Element

element.parentElement

Children

element.children

Next Sibling

element.nextElementSibling

Previous Sibling

element.previousElementSibling

Example Project — DOM Manipulation

Example 1: Change Text

HTML

<h1 id="title">Old Title</h1>

<button id="btn">Change</button>

JavaScript

let btn = document.getElementById("btn");

btn.addEventListener("click", function () {

    document.getElementById("title").innerText =
        "New Title";

});

Example 2: Dark Mode

HTML

<button id="mode">Dark Mode</button>

CSS

.dark {
    background-color: black;
    color: white;
}

JavaScript

let button = document.getElementById("mode");

button.addEventListener("click", function () {

    document.body.classList.toggle("dark");

});

Example 3: Add List Items

HTML

<ul id="list"></ul>

<button id="add">Add Item</button>

JavaScript

let button = document.getElementById("add");

button.addEventListener("click", function () {

    let li = document.createElement("li");

    li.innerText = "New Item";

    document.getElementById("list")
        .appendChild(li);

});

Example 4: Remove Element

HTML

<p id="text">Remove me</p>

<button id="delete">Delete</button>

JavaScript

document.getElementById("delete")
.addEventListener("click", function () {

    document.getElementById("text").remove();

});

DOM Manipulation Workflow

1. Select element
2. Modify element
3. Add event if needed
4. Update page dynamically

Common DOM Properties

Property Purpose
innerHTML Change HTML
innerText Change text
style Change CSS
classList Manage classes
value Get input value
src Change image
href Change links

Accessing Input Values

HTML

<input type="text" id="name">

JavaScript

let input = document.getElementById("name");

console.log(input.value);

Example: Live Greeting

HTML

<input type="text" id="username">

<button id="show">Show</button>

<h1 id="result"></h1>

JavaScript

document.getElementById("show")
.addEventListener("click", function () {

    let name =
        document.getElementById("username").value;

    document.getElementById("result").innerText =
        "Welcome " + name;

});

DOM Manipulation Logic

DOM manipulation follows one golden principle:

Select → Modify → React

Example:

let element = document.getElementById("demo");

element.innerText = "Changed";
  • Select element
  • Modify content
  • Browser updates webpage instantly

Real-Life Uses of DOM Manipulation

DOM manipulation powers:

  • Form validation
  • Image sliders
  • Dropdown menus
  • Search filters
  • Chat applications
  • Dark mode
  • Notifications
  • Live updates
  • Games

Best Practices

1. Use addEventListener()

Modern and clean.

2. Avoid Too Much innerHTML

Can create security risks.

3. Use querySelector()

Flexible and modern.

4. Minimize DOM Access

Store elements in variables.

Bad:

document.getElementById("demo").innerText = "A";
document.getElementById("demo").style.color = "red";

Better:

let demo = document.getElementById("demo");

demo.innerText = "A";
demo.style.color = "red";

Mini Challenge for Practice

Try building:

  1. Counter App
  2. To-Do List
  3. Calculator
  4. Digital Clock
  5. Dark Mode Toggle
  6. Image Gallery
  7. Quiz App

These projects strengthen DOM skills deeply.

Final Understanding

DOM manipulation is the bridge between:

HTML JavaScript
Structure Logic
Static page Dynamic behavior

Without DOM:

JavaScript cannot interact with webpage elements.

With DOM:

JavaScript can control the entire webpage dynamically.

That is why DOM manipulation is considered the beating heart of frontend development.

[Mid-Post Ad Placeholder]