DOM Manipulation 🌐

The DOM (Document Object Model) is your web page’s live tree. JavaScript can inspect, update, and listen to it in real time.

1) Selecting Elements 🎯


const title = document.querySelector("h1");
const buttons = document.querySelectorAll("button.primary");

querySelector grabs the first match.
querySelectorAll (or getElementById, etc.) grabs multiple nodes.

2) Changing Content ✏️


title.textContent = "Updated";
title.innerHTML = "<strong>Updated</strong>";
title.classList.add("highlight");

Prefer textContent for safety (no HTML parsing).
Use classList to add/remove CSS classes.

3) Creating & Appending Nodes 🧱


const item = document.createElement("li");
item.textContent = "New task";
document.querySelector("ul").append(item);

append, prepend, before, after, remove control placement.

4) Event Handling 🛎️


const form = document.querySelector("form");
 
form.addEventListener("submit", event => {
  event.preventDefault();
  console.log("Submitted!", new FormData(form));
});

Always call event.preventDefault() for SPA-style forms.
Use event.target and event.currentTarget to inspect sources.
Remember to removeEventListener for cleanup in long-lived pages.

5) Dynamic Updates ⚡

Toggle classes for showing/hiding elements.
Inject fragments for lists:


const fragment = document.createDocumentFragment();
data.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  fragment.append(li);
});
list.replaceChildren(fragment);

Key Takeaways ✅

Select precisely with querySelector and update using textContent, classList, and DOM creation APIs.
Listen for events, prevent default behaviors as needed, and clean up listeners.
Batch DOM updates (fragments) to keep pages smooth.

Recap 🔄

DOM manipulation turns raw data into interactive pages: grab nodes, change their content or styles, and react to user events for a responsive experience.