The DOM is your page, as objects

When the browser loads your HTML it builds a tree of objects. JavaScript can read and change that tree, and the page updates instantly.

One tool does almost everything

document.querySelector('.box')

It takes a CSS selector (the exact same syntax you already write in your stylesheet) and returns the FIRST match. querySelectorAll returns all of them.

The mistake that wastes an afternoon

querySelector('.box') with the dot finds a class. querySelector('box') without it looks for a <box> TAG, finds nothing, and returns null, then the next line fails with "cannot read properties of null". If you see that error, check your selector first.