📘 Best Practices for DOM Operations

DOM operations are powerful but can easily become inefficient or messy if not handled carefully. Here are some best practices for DOM manipulation that will keep your code clean, performant, and maintainable:

1️⃣ Wait for the DOM to Load

document.addEventListener("DOMContentLoaded", () => {
  // Safe to manipulate DOM here
});

2️⃣ Cache DOM Elements

// ❌ Inefficient
document.getElementById("title").textContent = "Hello";
document.getElementById("title").style.color = "blue";

// ✅ Efficient
const title = document.getElementById("title");
title.textContent = "Hello";
title.style.color = "blue";

3️⃣ Use querySelector and querySelectorAll

const firstItem = document.querySelector(".list-item");
const allItems = document.querySelectorAll(".list-item");

4️⃣ Modify Classes Instead of Inline Styles

const box = document.getElementById("box");
box.classList.add("highlight");
box.classList.remove("hidden");
box.classList.toggle("active");

5️⃣ Minimize Reflows & Repaints

const list = document.getElementById("myList");
const fragment = document.createDocumentFragment();

for (let i = 1; i <= 5; i++) {
  const li = document.createElement("li");
  li.textContent = "Item " + i;
  fragment.appendChild(li);
}

list.appendChild(fragment); // One reflow instead of five

6️⃣ Use Event Delegation

document.getElementById("myList").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("Clicked:", e.target.textContent);
  }
});

7️⃣ Use textContent Instead of innerHTML (When Possible)

// Safer
element.textContent = "Hello World";

8️⃣ Clean Up Event Listeners

function handleClick() {
  console.log("Clicked!");
}
button.addEventListener("click", handleClick);

// Later
button.removeEventListener("click", handleClick);

✅ Quick Recap

• Wait for DOM to load before manipulating.
• Cache elements to avoid repeated lookups.
• Use classList for styling changes.
• Batch DOM updates with fragments.
• Use event delegation for efficiency.
• Prefer textContent over innerHTML for safety.
• Always clean up event listeners.

👉 Following these practices will make your DOM code faster, cleaner, and safer.

📌 Mini Project: Task Manager

Add tasks, mark them complete, and remove them — all while following DOM best practices.

Add Task