How JavaScript changes what you see (the DOM)
From the console to a real page
Until now we printed to the console. But the real magic of JavaScript is changing the actual web page — the text, the colours, everything the user sees. The page, as JavaScript sees it, is called the DOM (Document Object Model).
How do I grab an element?
First, give your HTML element an id:
<h1 id="title">Hello</h1>
Then, in JavaScript, find it:
let heading = document.querySelector("#title");
document means "the whole page". querySelector("#title") means "find the element with id title". The # means id — the same as in CSS.
How do I change it?
heading.textContent = "Welcome to my site!";
The moment this runs, the heading on the page changes — live, right in front of the user. You can change styles too:
heading.style.color = "blue";
Why does this matter?
This is the bridge between your code and what people actually see. Every live counter, every form message, every popup — it is all just JavaScript reaching into the DOM and changing it.
The DOM is the page placed in JavaScript's hands.
querySelectorfinds an element;textContentandstylechange it.