Theory
How does JS 'see' the page?
You want FestConnect's 'Seats left: 30' to drop to 29 the moment someone registers, with no page reload. But your JavaScript is one thing and the HTML is another. How does code reach into the page and change a number that a user is looking at?
The answer is the DOM. When the browser loads your HTML, it does not just paint it, it builds a living tree of objects that mirrors your tags. JavaScript talks to that tree.
Theory
A family tree of your tags
Your HTML nests: <body> contains a <div>, which contains an <h1> and a <p>. The DOM turns that nesting into a family tree: body is a parent, the div its child, the h1 and p siblings inside. Every tag becomes an object-node you can point at and edit. The whole tree hangs from one root object: document.
Theory
The DOM, formally
The Document Object Model (DOM) is the browser's in-memory representation of the page as a tree of objects, one node per tag, rooted at `document`.
Key ideas:
- It is the live page in memory, not the .html file. Editing the DOM updates the screen instantly; the file on disk never changes.
- Each element node has properties you read and set:
textContent(its text),innerHTML(the HTML inside),value(a field's contents),style(inline CSS),className,id.
Practical
Reading and changing the seat counter
<p id="seats">Seats left: 30</p>
<script>
// grab the node (methods are the next lesson)
let el = document.getElementById("seats");
// READ a property
console.log(el.textContent); // "Seats left: 30"
// CHANGE properties: the page updates instantly
el.textContent = "Seats left: 29";
el.style.color = "crimson";
// innerHTML can inject tags (use with care)
el.innerHTML = "Seats left: <b>29</b>";
</script>
<!-- the seats.html file on disk still says 30; only the
live DOM in this browser changed. -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Where did the change go?
Your script sets el.textContent = "Seats left: 29" and the page shows 29. You open the .html file in an editor and it still says 30. Is that a bug? Explain what actually changed.
Show the answer
Not a bug. JavaScript changed the DOM, the live copy of the page held in the browser's memory, so the screen updated to 29. The file on disk is the original source and is never rewritten by DOM edits, so it still says 30. Refresh the page and it rebuilds the DOM from the file, showing 30 again. The DOM is the running page; the file is the blueprint.
Quiz
You want to put the plain text 'Seats left: 29' into an element, with no HTML tags interpreted. Which property is the safe choice?
- textContent, which treats the value as plain text
- innerHTML, which parses the value as HTML
- value, which is only for form fields
- style, which sets CSS
Show the answer
textContent, which treats the value as plain text
textContent sets the element's text literally, with no tag parsing, which is safe and correct for plain text (A). innerHTML parses its value as HTML, so it is powerful but risky with user input (it can inject unwanted tags/scripts) (B). value is for form controls like inputs, not a <p> (C). style sets CSS, not content (D). Prefer textContent unless you specifically need to insert HTML.
Watch out
DOM concept traps
1. 'It changed the HTML file': no. DOM edits change the live page in memory, not the source file. This is a common misunderstanding.
2. innerHTML with user input: injecting untrusted text as innerHTML can run malicious HTML/scripts (an XSS risk). Use textContent for user-supplied text.
3. Confusing the DOM tree with the raw HTML string: the DOM is objects with properties, not text you search with string methods.
Theory
Next: how to grab the right node
You have seen document.getElementById("seats") grab a node, but not how the family of finder methods works. The next lesson covers the DOM methods, getElementById, getElementsByName, and the old write/writeln, so you can reliably reach any element before reading or changing its properties. Concepts here, methods next, then Unit 5 makes it all interactive.
Summary
Key takeaways
- The DOM is the browser's live in-memory tree of objects representing the page, one node per tag, rooted at document.
- Editing the DOM updates the screen instantly but never changes the .html file on disk.
- Element properties: textContent (text), innerHTML (inner HTML), value (form fields), style (inline CSS), className, id.
- Prefer textContent over innerHTML for plain and user-supplied text (innerHTML can inject tags/scripts).
- Nodes relate as parent/child/sibling, like a family tree.
- Memory hook: the DOM is the running page, the file is the blueprint.