DOM and Browser Programming

🎯Learning Objectives

Level 15 transformed a workshop collection as data. This lesson connects that data to the browser’s document tree. You will select elements, read properties, change text, create and remove nodes, apply classes and inspect the current result.

Our task is a local workshop-card editor. Its controls update a small preview region without replacing the site header, sidebar or footer. You will distinguish a source HTML file from the live DOM and explain why a page update disappears after a reload unless a deliberate persistence mechanism exists.

🌳DOM — The Browser’s Document Tree

The Document Object Model represents the document as objects that scripts can inspect and change. The browser parses HTML into a tree, and scripts can then change that live tree. The current DOM can differ from the text originally downloaded in the HTML file.

The document contains elements, text and other node kinds. An article is an element node; the words inside its heading belong to a text node. Whitespace between elements can also be a text node, which matters when traversing all child nodes.

A DOM update does not rewrite your GitHub file. Changing a title with textContent affects this document instance. Reloading normally starts again from the delivered page and its initialization code.

🌐document, window and the Browser Environment

Document is the main entry point for the page’s document tree. Window exposes the browser window’s environment, including facilities such as timers and viewport information. These are browser APIs, not keywords built into the JavaScript language.

A pure function can calculate a record without document. A rendering function needs the document or a node to update. Keeping those responsibilities separate makes it easier to inspect a calculation without confusing it with layout behavior.

The DOM tree and the rendered layout are related but different. An element can exist in the DOM while being hidden from rendering. Counting element nodes does not prove the content is readable or operable.

const preview = document.getElementById("preview");
console.log(window.innerWidth);
console.log(preview !== null);

Window.innerWidth is viewport information, not the width of every content panel. Use the appropriate element measurement when the question concerns a card or container.

⏱️Initialize After the Required Elements Exist

A selector can return no match because the element is absent or because the script ran before parsing reached it. An external classic script with defer can run after parsing. DOMContentLoaded is another useful initialization point when you need the parsed document.

For a script that might be loaded after DOMContentLoaded has already fired, checking document.readyState avoids registering a listener for an event that will not happen again. Keep initialization idempotent if the application can call it more than once, so listeners are not duplicated.

This course’s lesson scripts are included in the page and initialize once on DOMContentLoaded. A component loader with a different lifecycle would need to account for its own insertion and cleanup.

function initPreview() {
  const preview = document.getElementById("preview");
  if (!preview) return;
  // Set up this preview once.
}
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initPreview, { once: true });
} else {
  initPreview();
}

🔎Select One Element and Check the Result

GetElementById looks up an ID string and returns the matching element or null. It does not take a CSS # prefix. QuerySelector takes a CSS selector and returns the first matching element or null. A malformed selector can throw a SyntaxError rather than merely return no match.

IDs should be unique within the document. A first-match selector is not a repair for duplicate IDs. Scope a query to the preview element when the action should affect its cards rather than unrelated cards in the lesson or sidebar.

Do not concatenate arbitrary user input into a selector and assume the resulting selector is valid. Generated IDs and controlled selectors simplify this lab. For an actual arbitrary identifier in a selector, use appropriate escaping such as CSS.escape.

const preview = document.getElementById("preview");
const firstTitle = preview?.querySelector(".card-title");
if (firstTitle) {
  firstTitle.textContent = "HTML Workshop";
}

Optional chaining avoids a property access on null here. It does not prove a required preview was successfully loaded; a real initialization failure should still be diagnosed rather than silently ignored everywhere.

📚Select Many — Static and Live Collections

QuerySelectorAll returns a static NodeList of matching elements. Its membership is a snapshot from the query time. If another card is inserted later, query again to obtain a list that includes it. The referenced elements themselves can still change; static does not mean frozen nodes.

Some other collections are live, such as an element’s children HTMLCollection. Its membership changes as the DOM changes. Iterating a live collection while removing elements can skip items if the indexes shift.

A NodeList is not an ordinary array with every array method. You can iterate it or convert it with Array.from when you want array operations. Choose a fresh query for an inspector that should reflect the current preview.

const before = preview.querySelectorAll(".card");
// Insert another card here.
const after = preview.querySelectorAll(".card");
console.log(before.length, after.length);
const titles = Array.from(after, card =>
  card.querySelector(".card-title").textContent
);

The lab’s inspector reads the current preview after each operation. It does not reuse the initialization query and then pretend that it counts newly added cards.

🔤textContent — Update Text Deliberately

TextContent reads or sets textual content. Setting it on an element replaces that element’s children with text, so choose the intended leaf element. Updating the title heading preserves the rest of the article; setting the whole article’s textContent would remove its note and badge.

InnerHTML parses markup. It is useful in carefully controlled situations, but placing untrusted text into it can create an injection risk. This lab uses createElement and textContent so a supplied label such as <strong>HTML</strong> remains literal text.

TextContent is not a measurement of what is visually readable. It can include text from hidden descendants. InnerText has rendering-aware behavior and different costs; choose the property that matches the task.

const title = card.querySelector(".card-title");
title.textContent = userSuppliedTitle;
// Literal text, not parsed HTML markup.

The preview editor changes a title and note separately. Its inspectable snapshot shows the same literal text instead of interpreting angle brackets as an instruction to build new elements.

🏷️Attributes and Properties — Related, Not Identical

An HTML attribute is part of the element’s attribute representation. A DOM property can expose current state. Some properties reflect attributes closely; others have distinct current and default states. Input.value is a common example: typing changes the current value without necessarily changing the value attribute.

A boolean attribute such as disabled depends on its presence. Disabled="false" still supplies the disabled attribute. Use button.disabled = false or removeAttribute("disabled") when you intend to enable the button.

Set attributes such as aria-pressed to the strings "true" or "false" according to the actual toggle state. Adding ARIA does not create the behavior it describes; the handler still has to perform the action.

button.disabled = cards.length === 0;
button.setAttribute("aria-pressed", highlighted ? "true" : "false");
console.log(input.value); // current user entry
console.log(input.getAttribute("value")); // attribute representation

In this lab, edit/remove/highlight controls are disabled when no card exists. The highlight toggle’s aria-pressed state is synchronized with the selected card’s class.

🧷dataset — Small Data Attributes

Data attributes can associate a small identifier with an element. Data-card-id is exposed as element.dataset.cardId. Dataset values are strings; storing data-count="3" does not make dataset.count a Number automatically.

Use a stable generated ID to match a select option with a preview card. A display title may change, contain spaces or be duplicated, so it is a poor identity key. Do not put private secrets in data attributes; they are visible in the client document.

A dataset is not a database or proof of trustworthy input. The lab generates its own card IDs and restricts actions to the preview’s current cards.

card.dataset.cardId = "card-1";
console.log(card.dataset.cardId); // "card-1"
// HTML representation: data-card-id="card-1"

When a title is edited, the card keeps its ID. Adding two cards with the same title is allowed; their generated IDs remain different.

🎨classList and Styles — Keep Presentation in CSS

ClassList.add, remove and toggle update class tokens without replacing every existing class. A two-argument toggle can apply a boolean state deterministically. This is useful for a highlighted card whose appearance is already defined in CSS.

Element.style exposes inline declarations. It does not report every declaration from stylesheets. GetComputedStyle reads resolved style information for an element; its result should not be confused with the original stylesheet text.

A meaningful state needs more than color. The lab’s highlight state changes the border and adds a visible “Highlighted” badge while updating the toggle’s pressed state. Selection and highlighting are separate concepts.

card.classList.toggle("is-highlighted", highlighted);
badge.hidden = !highlighted;
// CSS controls the actual border and badge presentation.
const resolvedColor = getComputedStyle(card).color;

Avoid continuously replacing style strings for every small state change. A scoped class is easier to review and does not accidentally remove unrelated inline properties.

🛠️Create, Populate and Insert Nodes

CreateElement makes an element that is initially disconnected from the document. Set its text and attributes, assemble its children, then insert it into the intended container. Creation by itself does not display anything on the page.

Append can append nodes or strings; appendChild accepts a node. Appending an already connected node moves that node rather than cloning it. CloneNode creates a copy under its rules, but does not automatically copy event listeners registered with addEventListener.

A DocumentFragment can group nodes before insertion. It is a useful organization tool, not a guarantee that any particular application becomes faster. Match the approach to the number of updates and the code’s clarity.

const item = document.createElement("li");
const article = document.createElement("article");
const title = document.createElement("h4");
title.className = "card-title";
title.textContent = "HTML Workshop";
article.append(title);
item.append(article);
preview.append(item);

The lab creates a list item containing an article, heading, note and badge. It sets the user’s text as textContent before insertion and limits the preview to six cards.

🧭Traverse the Tree — Elements or All Nodes?

ParentElement, children and nextElementSibling work with element relationships. ChildNodes and nextSibling can also include text or comment nodes. A formatting newline can therefore be the next sibling even when the next visible card is an element.

Closest searches the element itself and then its ancestors for a matching selector. QuerySelector searches matching descendants. These directions matter when locating the containing card or a title inside it.

Keep traversal scoped and purposeful. A handler should not climb until it finds any article in the entire document if the intended card belongs only to the preview.

const title = card.querySelector(".card-title");
const owner = title.closest("article");
console.log(owner === card); // true in this structure
console.log(preview.children.length); // current element children

The lab’s empty-state paragraph is outside the list. That keeps the list’s element children aligned with its actual card count.

🗑️Remove and Replace — Understand What Survives

Element.remove disconnects that element from its parent. A JavaScript variable can still refer to the detached object afterward. Removing an element from the document does not automatically erase every reference or listener associated with it.

ReplaceChildren replaces a container’s children with the supplied nodes or text. It is useful for a deliberate reset, but replacing a subtree can remove focused controls, selection state and node-specific listeners. A targeted update often preserves more useful state.

The editor adds, edits and removes preview nodes directly. Reset intentionally rebuilds only the preview cards and selection options. The input controls, status region, lesson content and global shell remain in place.

const cardItem = card.closest("li");
cardItem.remove();
// The item is detached; a variable may still refer to it.

preview.replaceChildren(); // clear only this container

When the selected card is removed, select the next remaining card, or the previous one when appropriate. If none remain, show an empty message and focus the title input so a new card can be created.

⌨️DOM Changes, Focus and Feedback

A successful DOM mutation should remain understandable to the person using the page. Use labeled native controls, a concise status region and a meaningful focus path. An article is content; it does not need to become a pretend button just to select it.

Do not move focus after every ordinary text update. Save and highlight keep the action control available. Removing the last card disables actions that require a selected card, so the lab deliberately returns focus to the editable title field.

A role="status" region announces concise updates in supporting assistive technology. Replacing an entire live preview on every keystroke can be noisy. The editor runs on explicit buttons and announces one outcome rather than broadcasting the full DOM snapshot.

status.textContent = "Card removed. Two cards remain.";
if (remainingCards.length > 0) {
  selector.focus();
} else {
  titleInput.focus();
}

Native keyboard and assistive-technology behavior should still be tested in a browser. A correct attribute or DOM snapshot alone is not a full accessibility result. Event propagation and form validation are developed further in Level 17.

📐Browser Measurements and Persistence

GetBoundingClientRect reports an element’s box relative to the viewport. Scrolling can change its reported position. Window.innerWidth describes the viewport; scrollHeight and clientHeight answer different questions about content and visible area. Do not infer a card’s layout from its title length alone.

Reading layout after frequent writes can have a performance cost. Prefer a clear update followed by the measurements you actually need, rather than repeatedly alternating tiny writes and reads inside a large loop.

A local DOM editor does not save to GitHub or a server. Storage APIs offer deliberate client persistence, but storage can be unavailable and stored text needs validation when read back. This lab intentionally resets its preview on page reload; only the course’s completion marker uses the established local storage behavior.

const box = card.getBoundingClientRect();
console.log(box.width, box.height);
console.log(box.top); // viewport-relative position

Use the browser’s Elements and accessibility inspection tools to review the live structure, computed styles and properties. View Source usually shows delivered HTML rather than every subsequent DOM mutation.

🧪Premium Interactive — Live DOM Card Editor

Select a card, edit its title and note, then save the text. Add a new card from the fields, toggle its highlight or remove the selected card. The preview uses actual list items and articles built with DOM methods; the inspector reads their current text and class state.

Titles must contain 1–60 characters after trimming; notes may be blank and are limited to 180 characters. The preview holds at most six cards. Duplicate titles are allowed because identity comes from generated IDs. Angle brackets remain literal text.

Remove all cards to test the empty state, then add one again. Reset restores the three starting cards and their unhighlighted state. Changes are local to this page visit and are not saved to the website repository.

🛠️Debugging — Structure, Timing and Current State

If an added card is absent from a saved NodeList, perform a fresh query before assuming append failed. If editing deletes the note, inspect whether textContent was assigned to the entire article. If disabled="false" leaves a button disabled, use the boolean property or remove the attribute.

If a reset causes an action to fire twice, inspect duplicate listener registration. If removing a card loses the keyboard path, decide which surviving control should receive focus. If the inspector reports data but the card is invisible, inspect CSS and rendering rather than claiming the DOM count proves visual success.

Use a minimal failing sequence: add one card, edit its title, toggle highlight, remove it, then reset. Confirm each operation changes only the intended preview and that the source page remains intact.

💬Interview Questions — Flip to Explain

❓MCQ Practice — Explain the Live Document

💻Extra Practice — Check Specific DOM Operations