JavaScript can read and modify HTML through the Document Object Model (DOM). Use querySelector, textContent, and innerHTML to interact with elements.
Keep DOM changes minimal — each modification can trigger reflows that slow the page.
const heading = document.querySelector("h1");
heading.textContent = "Updated Title";
const list = document.getElementById("myList");
const item = document.createElement("li");
item.textContent = "New item";
list.appendChild(item);
// Toggle class
document.querySelector(".menu").classList.toggle("open");Batch multiple DOM changes together or use DocumentFragment to minimize layout recalculations.