Unit 6 · JavaScript in the page
The DOM vs your HTML file
document is the live page the browser built from your HTML file, called the DOM. JavaScript changes the DOM, which changes the screen, but never the file on disk. Refresh and the page is rebuilt from the file.
The mix-up
What people often think
“document means the HTML file on disk.”
What the tutor says
document is the live page in the browser, built from the file. Changing it changes the screen, never the saved file.
If you change the page with code and then refresh, what will you see?
How it works
That is why changes made with code disappear on reload unless you save the data somewhere and apply it again.
Properties name slots on an element. el.textContent = "Open now" puts new words in the text slot; visual settings live under style, as in el.style.color = "green".
An example
const status = document.querySelector('#status');
status.textContent = 'Open now';
status.style.color = 'green';Close cousins of this mix-up
The tutor watches for these in the same lesson.
“textContent is the new text.”
textContent names the slot that holds the words. The value on the right of the = sign is what goes into it.
“Color is a property of the element itself.”
Visual settings live on the element's style. Write element.style.color = 'green'.
Practise it with a tutor watching
Select and change
Find any element on a page with code and change its text and style.
Free with an account. The first two units need no account.