DOM Manipulation

What is the DOM?

The DOM (Document Object Model) is a JavaScript representation of the HTML page. Think of the DOM as a tree of nodes (elements, text nodes, etc.) that you can read from and change with JavaScript. When you change the DOM, the browser updates what the user sees.

Why We Use the DOM?

The DOM is how browsers represent your webpage internally. Without the DOM, HTML would just be static. The DOM makes it interactive because JavaScript can read and modify it.

Example

HTML → A recipe written on paper.
DOM → A digital recipe book you can edit live (change ingredients, add steps, highlight text).

We Use DOM Manipulation To:

Update content dynamically (chat messages, shopping cart updates).
Respond to user actions (clicks, typing, scrolling).
Build rich web apps (games, forms, dashboards).

1. Selecting Elements

Methods

getElementById("id") → find element by ID.
querySelector("cssSelector") → find first match using CSS selector.
querySelectorAll("cssSelector") → find all matches (loopable).

Advantages

Easy to grab specific parts of the page.
querySelector supports all CSS selectors (very flexible).

Disadvantages

Overusing querySelectorAll may affect performance on large pages.
getElementsByClassName returns a live collection (can be confusing).

Example

<p id="intro">Hello!</p>
<p class="fruit">Apple</p>
<p class="fruit">Banana</p>

<script>
const byId = document.getElementById("intro");
const firstFruit = document.querySelector(".fruit");
const allFruits = document.querySelectorAll(".fruit");
</script>

Real-life Analogy

Like searching for a specific person:
getElementById = calling someone by unique ID card number.
querySelector = calling someone by their clothing (CSS style).
querySelectorAll = gathering a group wearing the same uniform.

2. Changing Content / Style

Content

.textContent → plain text (safe, ignores HTML).
.innerHTML → can insert HTML (⚠️ be careful with user input).

Style

.style.property = value → set inline CSS.
.classList.add/remove/toggle → better: use CSS classes.

Example

<p id="msg">Old text</p>

<script>
const msg = document.getElementById("msg");
msg.textContent = "New safe text";
msg.innerHTML = "<b>Bold text</b>";
msg.style.color = "red";
msg.classList.add("highlight");
</script>

Advantages

Dynamic user experience (instant updates without reload).
Fine control over elements (text, attributes, styles).
Interactive features (hide/show, highlight, change colors).
Works in all modern browsers.
Flexibility — mix text, HTML, images.

Disadvantages

Performance issues if styles are changed too often with JS.
Maintainability issues if inline styles are overused.
⚠️ innerHTML can cause XSS if user input is not sanitized.
Browser quirks (innerText vs textContent).
Reflow/Repaint issues with frequent style changes.

3. Event Listeners

Method

element.addEventListener("eventType", callback);

Advantages

Keeps HTML and JS separate (cleaner code).
Multiple listeners can be added to same element.
Listeners can be removed later.

Disadvantages

Too many listeners may slow performance.
Requires event delegation for large lists.

Example

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

<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", () => alert("Clicked!"));
</script>

Real-life Analogy

Like installing a doorbell:
Event = someone presses the button.
Listener = you hearing it and opening the door.

4. Creating / Removing Elements

Methods

document.createElement("tag") → new element.
parent.appendChild(child) → add to end.
el.remove() → delete element.

Advantages

Build dynamic lists, chat messages, notifications.
Update UI without reloading the page.

Disadvantages

If not cleaned up, old elements may cause memory leaks.

Example

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

<script>
const list = document.getElementById("list");
const li = document.createElement("li");
li.textContent = "New Item";

list.appendChild(li);
</script>

Real-life Analogy

Like adding/removing notes on a notice board dynamically.