The DOM

The Document Object Model

The browser turns HTML into a tree of objects called the DOM. JavaScript can read it, change it and rebuild it.

Selecting elements

document.querySelector("#title");   // first match\nconst cards = document.querySelectorAll(".card"); // all\nconst el = document.getElementById("title");

Reading & writing

el.textContent = "New title";\nel.innerHTML = "<b>Bold text</b>";\nel.style.color = "red";\nconsole.log(el.textContent);

Classes & attributes

el.classList.add("active");\nel.classList.toggle("hidden");\nel.setAttribute("disabled", "");\nel.dataset.id = "42";

Creating elements

const li = document.createElement("li");\nli.textContent = "Kofi";\nlist.appendChild(li);

Tip: Prefer textContent over innerHTML unless you genuinely need markup — it is safer and faster.