The DOM is the browser’s live model of your page. Your HTML is the starting instructions; the DOM is what actually exists once the page has loaded — and JavaScript can change it.
document.querySelector("h1").textContent = "Changed!";Type that into your browser console on any page and the heading changes immediately.
Selecting elements#
document.querySelector("#total"); // first match by id
document.querySelector(".card"); // first match by class
document.querySelector("ul li"); // first li inside a ul
document.querySelectorAll(".card"); // all matchesquerySelector takes any CSS selector, which means one thing to learn instead of five. It returns null if nothing matches — and that null is behind most beginner DOM errors.
Changing content#
const title = document.querySelector("#title");
title.textContent = "Hello"; // safe — treats it as plain text
title.innerHTML = "<strong>Hello</strong>"; // parses HTMLAttributes and form values#
const img = document.querySelector("img");
img.src = "photo.jpg";
img.alt = "A description";
const input = document.querySelector("#age");
console.log(input.value); // always a string
console.log(Number(input.value)); // convert before doing maths
const link = document.querySelector("a");
link.setAttribute("target", "_blank");Form inputs always give you text, even type="number" ones. That is the DOM equivalent of Python’s input() trap.
Styles and classes#
const box = document.querySelector(".box");
box.style.backgroundColor = "tomato"; // inline style — fine for one-offs
box.classList.add("is-active"); // better: let CSS do the work
box.classList.remove("is-hidden");
box.classList.toggle("is-open");
box.classList.contains("is-open"); // true / falsePrefer toggling classes over setting styles directly. It keeps the appearance in your CSS file where it belongs.
Creating and removing elements#
const list = document.querySelector("#todo-list");
const item = document.createElement("li");
item.textContent = "Learn the DOM";
item.classList.add("todo");
list.appendChild(item);
item.remove(); // take it out again
list.innerHTML = ""; // clear everything insideBuilding a list from data#
const tasks = ["Study", "Code", "Rest"];
const list = document.querySelector("#tasks");
list.innerHTML = "";
for (const task of tasks) {
const li = document.createElement("li");
li.textContent = task;
list.appendChild(li);
}Keep your data in an array and re-render from it. Trying to keep the DOM and your data in sync by hand is where things get messy.
Walking the tree#
const item = document.querySelector(".card");
item.parentElement;
item.children;
item.nextElementSibling;
item.closest(".container"); // nearest matching ancestorclosest() is genuinely useful when handling clicks — you can find the card that contains the button that was pressed.
Questions people ask#
What is the difference between textContent and innerText?
textContent returns everything including hidden text and is faster. innerText reflects what is visually rendered. Use textContent unless you specifically need the visual version.
querySelectorAll returns something odd — why can I not use map on it?
It returns a NodeList, not an array. Convert it with [...document.querySelectorAll(".card")] and then all the array methods work.
Do I need jQuery?
No. Modern browsers give you querySelector, classList and fetch, which cover what jQuery was mainly used for.