The DOM

The browser turns HTML into the Document Object Model: a tree of objects JavaScript can inspect and update. DOM work is easier when the initial HTML is already semantic and useful.

Select an element safely

01const heading = document.querySelector("[data-lesson-title]");
02
03if (heading) {
04  heading.textContent = "The DOM, clearly";
05}

querySelector returns the first match or null. querySelectorAll returns a static collection that supports forEach.

Create and insert content

01const list = document.querySelector("#course-list");
02const item = document.createElement("li");
03item.className = "course-item";
04item.textContent = "JavaScript";
05list?.append(item);

Use textContent for untrusted text. Assigning untrusted data to innerHTML can create a cross-site scripting vulnerability.

Attributes, classes, and data

01const card = document.querySelector(".course-card");
02card?.classList.toggle("is-complete", true);
03card?.setAttribute("aria-current", "page");
04console.log(card?.dataset.courseId);

Use attributes when the state has semantic meaning and classes for presentation. Keep ARIA state synchronized with the visible state.

Keep this

Query defensively, create nodes with DOM methods, use textContent for plain text, and preserve semantic HTML.