DOM Queries and Updates

DOM Queries and Updates | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn DOM Queries and Updates step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Query elements defensively and keep a stable component owner.
Treat application state as the source and the DOM as rendered output.
Create untrusted text safely without innerHTML.
Preserve focus and accessibility through updates.

DEEP EXPLANATION

Build the complete mental model

The DOM is a tree of live objects

The browser parses HTML into nodes with properties, methods, parent-child relationships, and event behavior. querySelector returns the first match or null; querySelectorAll returns a static collection. Query within the smallest stable owner instead of repeatedly searching the whole document. A missing element is a contract failure: guard optional enhancement or throw a useful initialization error for required markup.

Render from state instead of reading scattered text

Keep the underlying count, tasks, or selection in one JavaScript value and derive the visible DOM from it. Reading text back from several elements creates duplicated state that can disagree. A render function accepts current state and updates the smallest owned region. For larger lists, create a DocumentFragment and replace children once to reduce repeated layout work and make ownership clear.

Safe updates and focus are part of correctness

textContent inserts plain text; createElement, setAttribute, classList, and append build known structure. innerHTML parses a string as markup and is dangerous with untrusted data. Replacing a subtree can also discard focused elements and listeners. Prefer event delegation for dynamic children, move focus only when the interaction requires it, and announce important asynchronous changes through a restrained live region.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Render a safe list

Each title becomes text, not parsed markup, and replaceChildren commits the owned result once.

function renderTitles(list, titles) {
  const fragment = document.createDocumentFragment();
  for (const title of titles) {
    const item = document.createElement("li");
    item.textContent = title;
    fragment.append(item);
  }
  list.replaceChildren(fragment);
}

Example 2: Require component markup explicitly

Initialization fails at the real boundary rather than producing a later null-property error.

const root = document.querySelector("[data-counter]");
if (!(root instanceof HTMLElement)) throw new Error("Counter markup is missing");
const output = root.querySelector("output");
if (!(output instanceof HTMLOutputElement)) throw new Error("Counter output is missing");

How to trace this lesson

Identify one owner element and every required descendant.
Write the minimal state that reproduces the interface.
Render untrusted values with textContent and trusted structure with DOM methods.
After each update, verify reading order, focus, accessible names, and announced status.

Common mistakes and corrections

Using the DOM as the only source of application data.: Keep one validated state value and render from it.
Assigning learner input to innerHTML.: Use textContent unless parsed markup is intentionally trusted and sanitized.
Rebuilding the entire component after every click.: Update the owned region and preserve meaningful focus.

PRACTICE LADDER

Move from recognition to independent work

1
Inspect and draw the node tree for a small form.
2
Build a counter with state and one render function.
3
Render hostile-looking text safely in a list.
4
Add and remove tasks while testing keyboard focus after each action.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Treat the DOM as an output of application state

Query a stable owner, keep the underlying value in JavaScript, and render the smallest changed region. This separates the calculation from its presentation and prevents the document from becoming an accidental database. Guard nullable queries because markup and scripts can load in different contexts.

Use safe, focused update APIs

textContent inserts plain text without interpreting markup. createElement and append build trusted structure explicitly. innerHTML reparses a whole fragment, can destroy event and focus state, and becomes dangerous with untrusted input. Choose the narrowest operation that matches the intended update.

RUNNABLE EXAMPLE

Change one assumption at a time

Use the buttons, then clamp the count at zero and update the output with a sentence. Confirm keyboard focus remains on the activated button.

const counter = document.querySelector("[data-counter]");
const output = counter?.querySelector("output");
let count = 0;

counter?.addEventListener("click", (event) => {
  if (!(event.target instanceof HTMLButtonElement)) return;
  count += Number(event.target.dataset.change ?? 0);
  if (output) output.textContent = String(count);
});

const counter = document.querySelector("[data-counter]");
const output = counter?.querySelector("output");
let count = 0;

counter?.addEventListener("click", (event) => {
  if (!(event.target instanceof HTMLButtonElement)) return;
  count += Number(event.target.dataset.change ?? 0);
  if (output) output.textContent = String(count);
});

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

document.querySelector(".message").innerHTML = userInput;

Reveal repair and explanation

const message = document.querySelector(".message");
if (message) message.textContent = userInput;

Treat user input as text unless trusted markup is truly required. Also guard the query result before updating it.

INDEPENDENT LAB

Build without copying the example

Build a reading-list interface that adds plain-text titles, removes an item, and displays the current count.

const list = document.querySelector('[data-list]');
// Add state, event handling, and a render function.

const list = document.querySelector('[data-list]');
// Add state, event handling, and a render function.

Press Run to execute your code.

Self-review checklist User-entered titles are inserted as text. The count is derived from the current state. Adding and removing items preserves keyboard focus logically.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which property safely inserts plain text? textContent innerHTML outerHTML

2. Where should the counter's source of truth live? In one JavaScript state value In several unrelated text nodes In a CSS generated-content rule

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering