DOM Manipulation

Introduction

The DOM (Document Object Model) is the in-memory representation of HTML created by the browser.

JavaScript interacts with this structure to:

• Read content
• Modify elements
• Respond to user actions

---

How Browser Builds the DOM

graph TD A[HTML File] --> B[HTML Parsing] B --> C[DOM Tree] C --> D[CSS Parsing] D --> E[Render Tree] E --> F[Layout] F --> G[Paint]

Explanation

• DOM Tree → Structure of HTML
• Render Tree → DOM + CSS combined
• Layout → Calculates positions
• Paint → Displays pixels on screen

---

Note

DOM manipulation affects rendering. Frequent changes can slow down performance.

---

Why DOM Manipulation Matters

Dynamic UI

Update content without page reload

User Interaction

Handle clicks, inputs, keyboard events

Data Rendering

Convert API data into UI

Real Apps

Forms, dashboards, modals, lists

---

Selecting Elements

// Old ways
document.getElementById("id");
document.getElementsByClassName("class");
// Modern, flexible
document.querySelector(".card");
document.querySelectorAll(".btn");

---

Differences

getElementById

Fastest, returns single element

querySelector

Uses CSS selectors, flexible

querySelectorAll

Returns NodeList (not array)

---

Reading vs Writing DOM

Read

element.textContent;
element.innerText;
element.innerHTML;

Write

element.textContent = "Hello";
element.innerHTML = "<b>Hello</b>";

---

Attributes & Classes

element.setAttribute("id", "main");
element.getAttribute("id");

element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("open");

---

Creating Elements

const div = document.createElement("div");
div.textContent = "Hello";

document.body.append(div);

---

DOM Creation Flow

graph LR A[Create Element] --> B[Set Content] B --> C[Append to DOM] C --> D[Rendered]

---

Inserting Elements

parent.append(child);
parent.prepend(child);
element.before(newNode);
element.after(newNode);

---

Removing Elements

element.remove();
parent.removeChild(child);

---

Replacing Elements

oldEl.replaceWith(newEl);

---

Event Flow

graph TD A[Window] --> B[Document] B --> C[Parent] C --> D[Target] D --> E[Bubble Back]

---

Phases

1. Capture phase (top → target)
2. Target phase
3. Bubble phase (target → top)

---

Event Delegation

Instead of attaching listeners to many elements:

document.querySelector("#list").addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
        console.log("Item clicked");
    }
});

---

Rendering Performance

DOM updates are expensive.

Bad

for (let i = 0; i < 1000; i++) {
    document.body.append(document.createElement("div"));
}

Good

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
    fragment.append(document.createElement("div"));
}

document.body.append(fragment);

---

Reflow vs Repaint

graph TD A[DOM Change] --> B{Layout Change?} B -->|Yes| C[Reflow] B -->|No| D[Repaint]

• Reflow → layout recalculation (expensive)
• Repaint → visual update only

---

Real-World Pattern: Render List

const users = ["A", "B", "C"];
const ul = document.querySelector("#users");

ul.innerHTML = "";

users.forEach((user) => {
    const li = document.createElement("li");
    li.textContent = user;
    ul.append(li);
});

---

Security (XSS Risk)

element.innerHTML = userInput; // dangerous

---

Best Practices

1. Cache DOM queries
2. Minimize DOM updates
3. Use event delegation
4. Prefer textContent over innerHTML
5. Use fragments for bulk updates