JavaScript DOM Manipulation

What is the DOM?

The Document Object Model (DOM) is a tree-like representation of an HTML document. JavaScript can access and manipulate this tree to dynamically change the page.

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── div#container
            └── p.intro

Selecting Elements

// By ID (returns one element)
const title = document.getElementById("main-title");

// By class (returns HTMLCollection)
const items = document.getElementsByClassName("item");

// By tag (returns HTMLCollection)
const paras = document.getElementsByTagName("p");

// CSS selector — first match
const btn = document.querySelector(".btn-primary");

// CSS selector — all matches (returns NodeList)
const cards = document.querySelectorAll(".card");

Modifying Content

const el = document.getElementById("output");

// Text content
el.textContent = "Hello World";

// HTML content (be careful of XSS)
el.innerHTML = "<strong>Bold text</strong>";

// Attributes
el.setAttribute("class", "highlight");
el.getAttribute("id");
el.removeAttribute("disabled");

// Properties
el.id = "new-id";
el.className = "card active";
el.classList.add("visible");
el.classList.remove("hidden");
el.classList.toggle("active");
el.classList.contains("active"); // true/false

Modifying Styles

const box = document.querySelector(".box");
box.style.color = "red";
box.style.fontSize = "18px";
box.style.backgroundColor = "#f0f0f0";
box.style.display = "none";

Creating and Inserting Elements

// Create
const newDiv = document.createElement("div");
newDiv.className = "card";
newDiv.textContent = "New Card";

// Insert
const container = document.getElementById("container");
container.appendChild(newDiv);           // at end
container.prepend(newDiv);               // at start
container.insertBefore(newDiv, refNode); // before specific node

// Remove
newDiv.remove();
container.removeChild(newDiv);

// Clone
const clone = newDiv.cloneNode(true); // deep copy

Traversing the DOM

const el = document.getElementById("item");
el.parentElement;           // parent
el.children;                // child elements
el.firstElementChild;       // first child
el.lastElementChild;        // last child
el.nextElementSibling;      // next sibling
el.previousElementSibling;  // previous sibling

Common DOM Properties

Key Takeaway: The DOM is JavaScript's interface to HTML. Use querySelector for selecting elements, manipulate textContent/innerHTML for content, and classList for dynamic styling.