Command Palette

Search for a command to run...

Hectal
Phase 8Intermediate9 of 16 in JavaScript

The DOM

How JavaScript sees and changes a web page: the DOM tree, finding elements, changing text, classes and styles, building elements and keeping it fast.

Until now your code has mostly talked to the console. This phase connects JavaScript to the page. The browser turns your HTML into a tree of objects called the DOM (Document Object Model), and every change you see on a modern website, from a new chat message to a red error under a form field, is JavaScript changing that tree.

You'll learn what the tree really is (nodes, elements, text and the document object), how to find elements with querySelector and friends, and how to change their text safely (and why innerHTML with user input is a security hole). Then you'll work with attributes, classes, data-* values and styles, including CSS variables, and build, move and remove elements with createElement, append, replaceWith and <template>.

The last two topics go deeper: walking the tree from any element to its parents, children and siblings, and keeping pages fast by understanding reflow (layout) and repaint, batching changes and avoiding layout thrashing. You need Phases 1–7 (especially objects and functions). Phase 9 adds events, so the page can react to clicks and typing. The /html and /css courses explain the markup and styles you'll be changing here.

0/8 · 0%
8 topics ~3 h 23 code blocks & diagrams
Start with the first topic
1
8.1

What the DOM Is

The DOM is the live tree of objects the browser builds from your HTML; every tag, piece of text and comment becomes a node in it, document is the entry point, and changing the tree changes the page you see.

21 min 3 code practice

2
8.2

Selecting Elements

Before you can change an element you must find it: getElementById finds one by id, querySelector and querySelectorAll find elements with any CSS selector, and closest searches upwards; knowing which return live collections and which return null prevents most DOM bugs.

25 min 3 code practice

3
8.3

Changing Content

textContent reads and writes plain text, innerText reads the text as it appears on screen, and innerHTML reads and writes HTML markup; use textContent for anything a user typed, because innerHTML turns text into real elements and opens the door to cross-site scripting (XSS).

21 min 3 code practice

4
8.4

Attributes, Classes and Data

Attributes are what the HTML says (getAttribute, setAttribute); properties are the live values on the DOM object (input.value); classList adds, removes and toggles classes, and dataset reads and writes your own data-* values.

20 min 3 code practice

5
8.5

Changing Styles from JavaScript

element.style reads and writes an element's inline styles, getComputedStyle reads the final styles the browser actually applied, CSS variables can be set from JavaScript with setProperty, and toggling classes is usually the cleanest way to change looks.

21 min 3 code practice

6
8.6

Creating, Inserting and Removing Elements

document.createElement makes a new element that lives nowhere until you insert it with append, prepend, before, after or replaceWith; remove takes it out, inserting an existing element moves it, and <template> gives you ready-made markup to clone.

26 min 3 code practice

7
8.7

Traversing the DOM

From any element you can move around the tree: up with parentElement and closest, down with children, firstElementChild and lastElementChild, and sideways with previousElementSibling and nextElementSibling; the element-only versions skip the whitespace text nodes that the plain node versions include.

19 min 3 code practice

8
8.8

DOM Performance

Every DOM change can make the browser recalculate styles, redo layout (reflow) and redraw pixels (repaint); the browser batches this work until the next frame, so the way to stay fast is to batch your changes too, build big pieces off-page with a DocumentFragment, and never alternate layout reads with writes (layout thrashing).

22 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Welcome the user

A user has just signed in. Using JavaScript only (don't edit the HTML tab):

Beginner
2

Count and mark finished tasks

The list has tasks; finished ones carry data-done="true".

Beginner
3

Render a list safely

Write a function renderFruits(names) that replaces everything in #list with one <li> per name, in order.

Intermediate
4

Accent colour and dark mode

Finish two functions. The button wiring is already written (you'll learn events properly in Phase 9).

Intermediate
5

Build a product grid from data

Write renderProducts(products) that fills #grid from an array of { id, name, price, stock } objects, using the <template id="card-tpl">.

Intermediate