DOM Manipulation

The Document Object Model (DOM) is the browser's in-memory representation of an HTML document. JavaScript can read, modify, add, and remove elements in the DOM, which is how you create dynamic, interactive web pages.

---

What Is the DOM?

When the browser loads an HTML page, it parses the markup and builds a tree of nodes. Each HTML element becomes a node in this tree. JavaScript interacts with this tree through the global document object.

document
  └── html
       ├── head
       │    └── title
       └── body
            ├── h1
            ├── p
            └── div
                 ├── ul
                 │    ├── li
                 │    └── li
                 └── button

---

Selecting Elements

By ID

const heading = document.getElementById("main-heading");

Returns a single element or null.

By CSS Selector (Recommended)

// First match
const btn = document.querySelector(".btn-primary");

// All matches (returns a NodeList)
const items = document.querySelectorAll(".list-item");

Other Selectors

Method	Returns
getElementById(id)	Single element
querySelector(css)	First matching element
querySelectorAll(css)	NodeList of all matches
getElementsByClassName(cls)	HTMLCollection (live)
getElementsByTagName(tag)	HTMLCollection (live)