JavaScript — DOM

JavaScript can control HTML

The DOM (Document Object Model) represents an HTML document as a tree of objects.

Given:

<h1>Hello</h1>
<p>Welcome</p>

The browser creates a structure JavaScript can access:

Document
├── h1
└── p

JavaScript can read, change, add and remove these elements. The entry point is the global document object.

Selecting elements

By id:

const title = document.getElementById("title");
title.textContent = "Hello JavaScript";

CSS selectors (first match only):

document.querySelector("#title");     // by id
document.querySelector(".card");      // by class
document.querySelector("h1");         // by tag

All matches as a NodeList:

const items = document.querySelectorAll(".item");

items.forEach(item => console.log(item.textContent));

Changing content

textContent — plain text, safe for user input:

title.textContent = "New title";

innerHTML — parses HTML strings:

box.innerHTML = "<strong>Hello</strong>";

Security: never assign raw user input to innerHTML — that's an XSS hole. Use textContent for untrusted text.

Attributes

avatar.setAttribute("src", "new.jpg");
avatar.getAttribute("src");
avatar.removeAttribute("src");
avatar.src = "new.jpg";        // common attributes have direct properties
input.value = "Alice";

Classes via classList

const box = document.querySelector(".box");

box.classList.add("active");
box.classList.remove("active");
box.classList.toggle("active");       // on↔off — perfect for menus/modals
box.classList.contains("active");     // boolean check

This is THE bridge between JS events and CSS styling: JS toggles a class, CSS defines what it looks like.

Inline styles

CSS names become camelCase in JS:

box.style.color = "red";
box.style.backgroundColor = "black";   // background-color → backgroundColor

Prefer classList for anything beyond one-off tweaks.

Creating & inserting elements

New elements exist in memory until appended:

const li = document.createElement("li");
li.textContent = "Learn DOM";

const list = document.querySelector("ul");

list.appendChild(li);      // add at end
list.prepend(li);          // add at start
list.append(li, "text");   // multiple nodes/strings

Build a complete card:

const card = document.createElement("div");
card.className = "card";

const h2 = document.createElement("h2");
h2.textContent = "JavaScript";
const p = document.createElement("p");
p.textContent = "Learn the DOM.";

card.append(h2, p);
document.body.append(card);

Removing

li.remove();                    // modern
list.removeChild(li);           // via parent

Traversing the tree

item.parentElement;
item.children;
item.firstElementChild;
item.nextElementSibling;

For <ul><li>One</li><li>Two</li></ul>:

document.querySelector("ul").children.length;   // 2

Dimensions & computed styles

el.offsetWidth;   el.offsetHeight;    // layout size incl. borders
el.clientWidth;  el.clientHeight;     // content + padding

getComputedStyle(box).color;          // final applied styles
getComputedStyle(box).fontSize;

Timing — DOM readiness

Scripts running before HTML exists find null. Solutions:

1. Put <script> before </body>
2. <script src="app.js" defer>
3. Explicit wait:

document.addEventListener("DOMContentLoaded", () => {
    // safe to query now
});

Common gotcha: querySelector("#missing") returns null; calling .textContent on null throws. Guard when uncertain: if (el) { … }.

Mini Practice

1. Select by id, by class, all matches.
2. Change textContent; then innerHTML with a tag.
3. Toggle a class on click (with CSS styling it).
4. Swap an image's src attribute.
5. Build + append three list items from an array with forEach.
6. Remove one element; traverse parent/siblings of another.
7. Read offsetWidth and a computed style.

Next: DOM Events →