Everything Pocket has done so far happened in the console. A real user never opens the console; they see a page. The rest of this section moves Pocket onto that page, and the first step is learning how JavaScript sees a web page at all.
\nWhen a browser loads HTML, it does not keep it as text. It builds a tree of objects, one for every element, and draws the page from that tree. The tree is the DOM (Document Object Model), and the global document object is its root.
<body>\n <h1>Pocket</h1>\n <p id=\"total\">Total: $0.00</p>\n <ul id=\"expense-list\"></ul>\n <script src=\"app.js\" defer></script>\n</body>The DOM is live. Change an object in the tree and the browser redraws that part of the page straight away. That is all “updating the page” means.
\nThe defer attribute tells the browser to run app.js after it has built the whole tree. Without it, a script in the <head> runs before the body exists and every lookup finds nothing. Scripts loaded with type="module", which you will meet in section 5, are deferred automatically.
document.querySelector(selector) takes a CSS selector, the same syntax you write in a stylesheet, and returns the first matching element. querySelectorAll returns all matches.
const totalEl = document.querySelector(\"#total\"); // by id\nconst list = document.querySelector(\"#expense-list\");\nconst firstItem = document.querySelector(\"#expense-list li\");\nconst allItems = document.querySelectorAll(\"li.big\"); // every matchquerySelectorAll returns a NodeList. It has forEach and works with for...of; spread it, [...allItems], when you want array methods such as map and filter.
When nothing matches, querySelector returns null, and the next line that uses the result throws TypeError: Cannot set properties of null. That error almost always means a typo in the selector or a script that ran too early.
Once you have an element, its properties are the levers:
\ntotalEl.textContent = \"Total: $30.20\"; // replace the text\ntotalEl.classList.add(\"over-budget\"); // add a CSS class\ntotalEl.classList.toggle(\"highlight\"); // add if absent, remove if present\ntotalEl.hidden = false; // show or hide\nlist.dataset.month = \"2026-10\"; // sets data-month=\"2026-10\"textContent sets plain text. Prefer classes over setting style directly: the CSS file decides what .over-budget looks like, and JavaScript only decides whether the element has it. Designers can then change the look without touching your logic.
To add new things to the page, create elements, fill them in, and attach them:
\nconst li = document.createElement(\"li\");\nli.textContent = \"Coffee: $4.50\";\nli.dataset.id = \"exp-1\";\nlist.append(li);createElement makes an element that is not on the page yet. append attaches it as the last child of list, and only then does it appear. element.remove() takes an element off the page.
Pocket has an array of expenses and needs one <li> per expense. The cleanest way to keep the page and the data in agreement is a render function: it clears the container, then rebuilds it from the data, every time the data changes.
function renderExpenses(expenses) {\n list.replaceChildren(); // remove the old items\n for (const expense of expenses) {\n const li = document.createElement(\"li\");\n li.textContent = `${expense.label}: ${formatMoney(expense.amount)}`;\n li.dataset.id = expense.id;\n if (expense.amount >= 10000) {\n li.classList.add(\"big\");\n }\n list.append(li);\n }\n const total = expenses.reduce((sum, e) => sum + e.amount, 0);\n totalEl.textContent = `Total: ${formatMoney(total)}`;\n}Rebuilding everything sounds wasteful, and for thousands of items it would be. For the dozens of items in a personal app, it is fast and, more importantly, simple: there is exactly one function that decides what the list looks like, and the page can never drift out of step with the data. This idea, the screen as a function of the data, is the core of frameworks like React, which do the same thing more cleverly.
\nThe rule that makes it work is discipline about direction. Data flows one way: change the array, then call renderExpenses. Never fix up a single <li> by hand “just this once”, and never read the expenses back out of the page to calculate something; the page is a picture of the data, not the data itself. The moment two places can change what is on screen, they will eventually disagree.
The page now shows Pocket’s data, but it cannot react to the user yet. Next lesson: events.
\n","toc":[{"id":"sec-1","text":"The DOM: the page as objects","level":2},{"id":"sec-2","text":"Selecting elements","level":2},{"id":"sec-3","text":"Changing what is there","level":2},{"id":"sec-4","text":"Creating elements and rendering a list","level":2}],"takeaways":["The browser turns your HTML into the DOM, a tree of objects; changing those objects with JavaScript changes the page immediately.","querySelector returns the first element matching a CSS selector, or null; querySelectorAll returns all matches.","Set text with textContent, not innerHTML, whenever the content comes from data or users, so it can never run as HTML.","Change appearance through classList and let CSS decide what the classes look like.","A render function that clears a container and rebuilds it from your data keeps the page and the data in sync."],"further":[{"title":"Introduction to the DOM (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction"},{"title":"Document.querySelector() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector"},{"title":"Element.classList (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Element/classList"}],"quiz":[{"q":"document.querySelector("#totl").textContent = "$0.00"; throws TypeError: Cannot set properties of null. What is the most likely cause?
querySelector returned null.","why":"Correct. A typo in the id (totl), or running the script before the element exists, both produce null."},{"text":"textContent cannot be set on paragraphs.","why":"textContent can be set on any element. The error says the thing before .textContent was null."},{"text":"The page needs to be reloaded after changing the DOM.","why":"DOM changes show up immediately. No reload is needed or wanted."}],"answer":0},{"q":"A user types <img src=x onerror=alert(1)> as an expense label. Which line displays it safely?
li.innerHTML = label;","why":"innerHTML parses the text as HTML, so the image tag is created and its onerror code runs. This is an XSS hole."},{"text":"li.textContent = label;","why":"Correct. textContent inserts plain text, so the user sees the characters they typed and nothing runs."},{"text":"li.innerHTML = `<span>${label}</span>`;","why":"Wrapping the label in a template literal still sends it through the HTML parser. The tag inside is still created."}],"answer":1},{"q":"Your render function appends one <li> per expense. After adding a fourth expense and calling render again, the list shows seven items. What is missing?
list.replaceChildren().","why":"Correct. Without clearing, every render appends a full new copy after the old items."},{"text":"A call to querySelectorAll instead of querySelector.","why":"The container is a single element, so querySelector is right. The problem is the old children are never removed."},{"text":"const instead of let for the expenses array.","why":"How the array is declared does not affect the DOM. The duplicates come from never removing the previous items."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Total: $0.00
\nTotal: $0.00
\nWrite the body of renderExpenses(expenses) so it rebuilds the page from the data:
#expense-list.<li> per expense with the text Coffee: $4.50 (label, colon, formatted amount), its data-id set to the expense’s id, and the class big when the amount is 10000 cents or more.#total to Total: followed by the formatted sum.Calling renderExpenses again must replace the list, not add to it, and labels must be shown as plain text.
document.querySelector("#expense-list") and document.querySelector("#total").","For each expense: document.createElement("li"), set textContent, set li.dataset.id, maybe li.classList.add("big"), then list.append(li).","Start the function with list.replaceChildren(); so a second render does not duplicate items, and compute the total with reduce."],"explanation":"The render function is the single place that decides what the list looks like. Clearing first with replaceChildren() means calling it again, after the data changes, produces exactly one item per expense instead of appending duplicates. textContent puts the label in as plain text, so a label like <b>Tea</b> is shown literally instead of becoming bold (or, with nastier input, running code). The big class only flags the item; the stylesheet decides how flagged items look. dataset.id writes a data-id attribute you will use in the next lesson to know which expense a click belongs to.