JavaScript DOM Manipulation Practice

The DOM (Document Object Model) is the browser's live representation of your HTML. Every element is a node in a tree structure. JavaScript can read and modify this tree, and the browser re-renders when it changes.

DOM operations are expensive compared to plain JS. Minimize direct DOM access by batching reads and writes.

Modern DOM selection uses CSS selectors:

// Single element (first match)
const btn = document.querySelector(".submit-btn");

// Multiple elements (static NodeList)
const items = document.querySelectorAll(".list-item");

// Always guard against null
const panel = document.querySelector("#panel");
if (!panel) return;

Why querySelector over getElementById? For a printable reference of all DOM selection and manipulation methods, see the JavaScript DOM manipulation cheat sheet.

• Consistent API (always CSS selectors)
• Works on any element, not just document
• More expressive: #id, .class, [data-attr], :not()

Watch out: If your script runs before the DOM is ready, elements won't exist yet. Either use defer on your script tag or wait for DOMContentLoaded.

Once you have an element, you often need to find related elements:

// Parents and children
element.parentElement      // direct parent
element.children           // child elements (HTMLCollection)
element.firstElementChild  // first child element
element.nextElementSibling // next sibling element

// closest() - walk UP the tree (essential for delegation)
const card = button.closest(".card");  // finds nearest ancestor matching selector

// matches() - test if element matches selector
if (element.matches(".active")) { ... }

The closest() pattern is critical for event delegation. It finds the ancestor you care about regardless of which child was actually clicked.

Modern insertion methods are cleaner than the old appendChild:

// Create
const li = document.createElement("li");
li.textContent = "New item";
li.classList.add("list-item");
li.dataset.id = "123";

// Insert (relative to target element)
parent.append(li);        // as last child
parent.prepend(li);       // as first child
sibling.before(li);       // before sibling
sibling.after(li);        // after sibling

// Remove
li.remove();              // removes from DOM

For trusted HTML strings, use insertAdjacentHTML:

// Safer than el.innerHTML += "..."
el.insertAdjacentHTML("beforeend", "<li>New item</li>");

Positions: "beforebegin", "afterbegin", "beforeend", "afterend"

This is a security-critical distinction:

// SAFE: treats input as plain text (escapes HTML automatically)
element.textContent = userInput;

// RISKY: parses input as HTML
// Only use with trusted content, never with user input
element.innerHTML = trustedHtmlString;

Rule: Use textContent for user-provided content. For HTML, either sanitize first with a library like DOMPurify, or construct elements with createElement and textContent.

Side effect of innerHTML: Setting it destroys all child nodes (and their event listeners) and creates new ones. This is why event delegation matters.

The classList API is cleaner than manipulating className strings:

element.classList.add("active", "visible");    // add one or more
element.classList.remove("hidden");            // remove
element.classList.toggle("expanded");          // add if missing, remove if present
element.classList.toggle("dark", isDark);      // force on/off based on boolean
element.classList.contains("active");          // check
element.classList.replace("old", "new");       // swap

Why it matters: No more string splitting and rejoining. No accidental partial matches. Clean, readable code.

Instead of attaching listeners to every item:

// BAD: One listener per item (scales poorly, breaks on dynamic items)
items.forEach(item => item.addEventListener("click", handler));

// GOOD: One listener on parent, handle all children
list.addEventListener("click", (e) => {
  const target = e.target as Element;  // TypeScript: cast EventTarget
  const item = target.closest("li[data-id]");
  if (!item) return; // clicked something else

  // item is the <li> we care about
  handleItemClick(item.dataset.id);
});

Why delegation works:

1. Events bubble up from target to ancestors
2. closest() finds the right element regardless of click position
3. Works for dynamically added elements automatically
4. One listener uses less memory than hundreds

The pattern: Attach to stable parent -> use closest() to find target -> guard with if (!item) return. This listener-on-parent pattern is an application of the Observer design pattern, where one handler reacts to events from many sources.

Form submissions and link clicks trigger default browser behavior. Use preventDefault() to handle them in JavaScript:

form.addEventListener("submit", (e) => {
  e.preventDefault();  // stop page reload
  const data = new FormData(form);
  submitToAPI(data);
});

link.addEventListener("click", (e) => {
  e.preventDefault();  // stop navigation
  handleNavigation(link.href);
});

Also useful: stopPropagation() prevents the event from bubbling to parent handlers.

This distinction trips up even experienced developers:

// Attributes (HTML)
el.getAttribute("value");     // initial HTML value
el.setAttribute("data-id", "123");
el.dataset.id = "123";        // shorthand for data-* attributes

// Properties (live JS)
input.value;                  // current value (what user typed)
input.checked;                // current checked state

The gotcha: For form inputs, the attribute is the initial value; the property is the current state. They can diverge after user interaction.

Two common needs: getting CSS styles and getting element dimensions.

Computed styles vs inline styles

// element.style only reads INLINE styles (set via style attribute or JS)
el.style.color;  // "" if color comes from CSS

// getComputedStyle reads the ACTUAL computed value
const styles = getComputedStyle(el);
styles.color;  // "rgb(0, 0, 0)" - the real value

Element position and size

// getBoundingClientRect: position relative to viewport
const rect = el.getBoundingClientRect();
rect.top;     // distance from viewport top
rect.left;    // distance from viewport left
rect.width;   // element width (including padding, border)
rect.height;  // element height

// Dimensions only
el.offsetWidth;   // width including padding + border
el.offsetHeight;  // height including padding + border
el.clientWidth;   // width including padding (no border)

// Scroll position
el.scrollTop;     // pixels scrolled from top
el.scrollLeft;    // pixels scrolled from left

Layout thrashing happens when you interleave reads and writes:

// BAD: Forces layout recalculation on each iteration
items.forEach(item => {
  const height = item.offsetHeight;  // READ (triggers layout)
  item.style.width = height + "px";  // WRITE (invalidates layout)
});

// GOOD: Batch reads, then batch writes
const heights = items.map(item => item.offsetHeight);  // all READs
items.forEach((item, i) => {
  item.style.width = heights[i] + "px";  // all WRITEs
});

For async DOM updates such as fetching data before inserting elements, see the async/await page.

For bulk insertions, use DocumentFragment:

const fragment = document.createDocumentFragment();
data.forEach(text => {
  const li = document.createElement("li");
  li.textContent = text;
  fragment.append(li);  // no reflow yet
});
ul.append(fragment);    // single reflow for all items

• MDN: Document Object Model
• MDN: Event delegation
• javascript.info: Event delegation
• web.dev: Avoid layout thrashing
• OWASP: DOM XSS Prevention