The DOM: Document Object Model

What is the DOM?

The Document Object Model (DOM) is a programming interface that represents your HTML as a tree of objects. When a browser loads an HTML page, it creates a DOM — a structured representation you can read and modify with JavaScript in real time.

// HTML becomes a tree:
// document
//   └── html
//         ├── head
//         │     ├── title
//         │     └── meta
//         └── body
//               ├── h1
//               ├── div#container
//               │     ├── p.text
//               │     └── a#link
//               └── script

// The document object is the entry point to the DOM:
console.log(document.title);           // page title
console.log(document.URL);             // current URL
console.log(document.body);            // body element
console.log(document.documentElement); // html element

// Navigating the tree:
const body = document.body;
console.log(body.children);       // HTMLCollection of child elements
console.log(body.childNodes);     // NodeList including text nodes
console.log(body.firstChild);     // first child node
console.log(body.firstElementChild); // first child element
console.log(body.parentElement);  // null (body's parent is html)
console.log(body.nextElementSibling); // null (body has none)
console.log(body.previousElementSibling); // head element

Node Types

// Main DOM node types:
// Element nodes (nodeType 1) — HTML tags: 
, 
, etc.
// Text nodes (nodeType 3) — text content between tags
// Comment nodes (nodeType 8) — HTML comments

// Working with element properties:
const el = document.getElementById("myElement");

el.id;              // element's id attribute
el.className;       // all classes as string
el.classList;       // classList object (better!)
el.tagName;         // "DIV", "P", etc. (uppercase)
el.innerHTML;       // HTML content as string
el.textContent;     // text content (no HTML)
el.innerText;       // visible text (respects CSS display:none)
el.outerHTML;       // element including its own tag
el.attributes;      // all HTML attributes

// Style:
el.style.color = "red";
el.style.backgroundColor = "#f5a623";
el.style.fontSize = "18px";

// Reading computed styles (after CSS is applied):
const computed = window.getComputedStyle(el);
computed.getPropertyValue("font-size");  // "18px"

Modifying Classes

const el = document.querySelector(".my-element");

// classList is better than className:
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("selected");    // add if absent, remove if present
el.classList.toggle("open", true);  // force add
el.classList.toggle("open", false); // force remove
el.classList.contains("active");    // true/false
el.classList.replace("old", "new"); // replace one class

// Multiple classes:
el.classList.add("class1", "class2", "class3");

// Attributes:
el.setAttribute("data-id", "123");
el.getAttribute("data-id");    // "123"
el.removeAttribute("hidden");
el.hasAttribute("disabled");   // true/false

// Dataset (data-* attributes):
// HTML: 

el.dataset.userId;  // "42"
el.dataset.role;    // "admin"
el.dataset.newProp = "value";  // adds data-new-prop="value"