Document
The root object for the current page.
Platform under construction
The DOM
The DOM is the live object model of an HTML document. JavaScript uses it to read, change, create and remove what users see.
const title = document.querySelector("h1");
title.textContent = "Updated by JavaScript";
document.body.classList.add("is-ready");
DOM & HTML Interaction
The DOM turns HTML into a tree JavaScript can work with.
When the browser loads HTML, it builds the Document Object Model. Every element becomes an object with properties, methods and relationships to other nodes.
The DOM is live. If you change an element with JavaScript, the page changes immediately. That is powerful, but it also means DOM code should be deliberate and predictable.
Think of the DOM as the connection layer between your data and the visible interface. Good DOM code respects structure, accessibility and performance.
Element
An HTML element represented as a JavaScript object.
Node tree
Parent, child and sibling relationships between nodes.
Live interface
Changes to DOM objects update the rendered page.
Examples
DOM code should be scoped, safe and visible in the interface.
Check that an element exists
const status = document.querySelector("[data-status]");
if (status) {
status.textContent = "Ready";
}
Assuming every selector matches
document.querySelector("[data-status]").textContent = "Ready";
// This crashes when the element is missing.
Code patterns
Reusable examples for quick reference.
These patterns are the DOM moves you use constantly: select, read, change, create, navigate and render.
Select one element
querySelector returns the first matching element or null.
const heading = document.querySelector("h1");
heading.textContent = "DOM ready";
Select many elements
querySelectorAll returns a static NodeList.
const cards = document.querySelectorAll(".card");
cards.forEach(card => card.classList.add("ready"));
Create an element
createElement gives you a new element object.
const item = document.createElement("li");
item.textContent = "New item";
list.append(item);
Read relationships
Elements know their parent and children.
const button = document.querySelector("button");
const panel = button.closest(".panel");
Rules that matter
Keep the DOM predictable.
DOM APIs are powerful because they affect the live page. Use them with stable hooks, clear state and safe text updates.
Use meaningful selectors
data-* hooks are often safer than styling classes.
Check for null
A missing element should not crash the whole interface.
Prefer textContent for text
It avoids accidental HTML injection.
Keep DOM code local
Update the smallest useful part of the page.
Respect accessibility
DOM changes should preserve labels, focus and states.
Batch heavy changes
Large DOM updates can become expensive.
Production thinking
A good DOM layer connects behavior to HTML without making the page fragile.
Why does this matter?
Most real JavaScript work eventually touches the DOM. If this layer is messy, the interface becomes fragile.
Accessibility
DOM changes should keep accessible names, focus order and visible status messages clear.
Production note
Production DOM code should be scoped, defensive and easy to trace back to a component or feature.
SEO note
Important page content should exist in crawlable HTML or render reliably when JavaScript runs.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change the status text.
- Add a second paragraph and update it too.
- Remove the data-status attribute and notice the failure path.
Practice assignment
Do this before moving to the next topic.
- Select one element safely.
- Change its textContent.
- Add a class through classList.
Try it yourself
Update a status element
Self-check
Before you continue, prove that you understand The DOM.
If you can explain the DOM operation and its failure path, you are ready to use it in real UI code.
- Can you explain what the DOM is?
- Can you explain why the DOM is a tree?
- Can you explain why selectors can return null?
- Can you explain why textContent is safer than innerHTML?
- Can you explain how DOM changes affect the visible page?
Senior audit upgrade
Extra production context for The DOM.
Safe DOM default
Prefer textContent, createElement, templates and replaceChildren for normal UI rendering. Reach for innerHTML only when the markup is controlled and the risk is understood.
const item = document.createElement("li");
item.textContent = userInput;
list.replaceChildren(item);