The DOM (Document Object Model) is the browser's live tree of objects representing the page. JavaScript reads and changes the page by manipulating that tree.

The tree

window → document → <html> → <body> → elements & text nodes

Concept	Meaning
Node	Anything in the tree: elements, text, comments (`nodeType` 1, 3, 8)
Element	A tag like `<div>` — has attributes, `children`, `classList`…
`window`	The global object in browsers: timers, `location`, `history`, `localStorage`, `innerWidth`
`document`	Entry point to the page tree

Selecting elements

JavaScript

document.getElementById("app");               // one element or null
document.querySelector(".card > h2");         // first match (any CSS selector)
document.querySelectorAll("li.item");         // static NodeList (has forEach)
document.getElementsByClassName("item");      // LIVE HTMLCollection (updates itself)
element.closest(".card");                     // nearest ancestor matching (incl. itself)
element.matches("button.primary");            // does it match the selector?

Output

JavaScript (browser, not run)

Reading and changing content

JavaScript

const title = document.querySelector("h1");
title.textContent = "Hello <b>world</b>";     // plain text — safe
title.innerHTML = "Hello <b>world</b>";       // parses HTML — XSS risk with user input!
title.classList.add("active");                // also remove / toggle / contains / replace
title.style.color = "tomato";                 // inline style (camelCase properties)
title.setAttribute("aria-label", "Greeting");
title.dataset.userId = "42";                  // → data-user-id="42"
const input = document.querySelector("input");
input.value;                                  // current value (property) vs getAttribute("value") (initial)

Output

JavaScript (browser, not run)

Creating, inserting, removing

JavaScript

const list = document.querySelector("#todo");
const frag = document.createDocumentFragment();   // batch inserts → one reflow
for (const text of ["Learn DOM", "Build app"]) {
  const li = document.createElement("li");
  li.textContent = text;
  frag.append(li);
}
list.append(frag);                    // also prepend / before / after / replaceWith
list.insertAdjacentHTML("beforeend", "<li>Ship</li>");
list.firstElementChild.remove();

Output

JavaScript (browser, not run)

Script loading and page lifecycle

Tag / event	Behaviour
`<script>`	Blocks HTML parsing while it downloads and runs
`<script defer>`	Downloads in parallel; runs in order after parsing, before `DOMContentLoaded`
`<script async>`	Downloads in parallel; runs as soon as it arrives (order not guaranteed)
`<script type="module">`	Deferred by default, strict mode, supports `import`
`DOMContentLoaded`	HTML parsed, DOM ready (images may still be loading)
`load`	Everything loaded, including images and stylesheets

Performance: reflow and repaint

Changing geometry (size, position, adding nodes) triggers layout/reflow; colours only trigger repaint.
Reading layout (offsetHeight, getBoundingClientRect) right after writing forces a synchronous reflow — batch reads, then writes (layout thrashing).
Animate transform and opacity (compositor-only) and use requestAnimationFrame for visual updates.

textContent vs innerText vs innerHTML?

defer vs async?