Subjects and lessons to explore.

Law

Web Development · Foundations

The Document Object Model (DOM)

10 min read 5 practice questions
8 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

The Document Object Model, usually called the DOM, is the browser's in-memory object representation of a document such as an HTML page. It organizes the page as a tree: the document contains elements, and elements can contain other elements and text. JavaScript can locate nodes in that tree, read them, change them, or create and attach new ones. The DOM is a browser-provided API, not a feature built into JavaScript itself.

Why this matters

The DOM is the bridge between a static HTML document and a page whose visible content can change after it loads. In coursework, it makes document structure, tree relationships, and APIs concrete. In practice, DOM work supports things such as updating a counter, showing a validation message, or rendering a list from data. Knowing what the DOM represents also helps you choose a narrowly targeted selector and avoid accidentally replacing more of a page than intended.

The college version

A document becomes a tree of objects

HTML is sent or loaded as text, but the browser builds a document model it can render and expose to programs. MDN describes the DOM as the representation in memory that connects a document's structure to a script or programming language. In a typical HTML document, the document is the root; html contains head and body; body may contain main, headings, paragraphs, and lists. That containment is why DOM diagrams are commonly drawn as trees. A can have children, and a has a . An node corresponds to an element such as a p or button, while text inside an element is represented as text content. The DOM is not the original source file and is not JavaScript syntax. It is an API supplied by the browser, which JavaScript can call. This distinction matters when reading code: document is a browser object, whereas JavaScript supplies the language constructs used to work with it.

Finding a specific node

Most DOM work begins by getting a reference to an existing node. document.querySelector(selector) accepts a and returns the first element in document order that matches it; if nothing matches, it returns null. For example, document.querySelector('#status') looks for the element with id status. A selector should describe the intended target as precisely and simply as the page design allows. Code must account for the possibility of null before trying to use the returned value. is useful for one target; it does not return every matching element. Other selection APIs exist, but they are not interchangeable merely because their names look similar. The important habit is to identify the node you intend to change, check that it was found, and then make the smallest appropriate update.

Reading and changing content

Once code has an element reference, it can inspect or modify properties. The property represents the text content of a node and its descendants. Assigning a string to element.textContent changes the element's text rather than asking the browser to interpret that string as HTML markup. That is a useful default when inserting ordinary labels, names, or counts. DOM code can also create an element with document.createElement('li'), set its textContent, and attach it with append(). Creating and attaching are separate steps: making a node alone does not put it into the visible document. These operations change the live DOM after the page has loaded; they do not rewrite the HTML file on disk. This lesson focuses on selecting and updating document nodes. User-event handlers, form processing, and data fetched from a server are separate topics that can later decide when or what to update.

A constrained update is easier to reason about

Consider an existing paragraph: <p id="status">Waiting</p>. A script can obtain it with const status = document.querySelector('#status');. If status is not null, status.textContent = 'Ready'; changes only the paragraph's text. The selector identifies the target; the null check handles an absent target; textContent makes the intended kind of change clear. This is easier to audit than selecting a broad container and replacing all of its contents. It also separates data from markup: the string Ready is treated as text. DOM APIs can build rich interfaces, but reliable code still depends on a correct model of the tree, carefully scoped selection, and an appropriate mutation method. A developer can inspect the page before and after the statement and identify exactly which node changed. That narrow boundary makes a bug easier to diagnose and makes later maintenance less surprising. It also reduces accidental changes to headings, controls, and neighboring content whose structure is unrelated to the current task. Specific selection is therefore a design choice as well as a debugging habit for shared, long-lived pages and teams.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Imagine the browser turns a web page into a family tree it can keep on its desk. The page is not just a long sentence anymore: it has parts, and parts can contain smaller parts. JavaScript can ask for one part by name, read its text, or replace its text. For example, it can find the paragraph named status and change Waiting to Ready. It needs the exact label so it does not change a different part by accident.

Picture it like this

The DOM is like a labeled tree of storage boxes. A box can hold smaller boxes or a note. A precise label helps you open just the box you mean to change. Putting new text on the note changes what someone reads in that box.

Where the picture stops working

A DOM tree is a programming representation, not a physical tree or a collection of independent boxes. Nodes have browser-defined behavior and properties, and changing the DOM may change what is displayed without changing the original HTML file.

Worked example

Start with <p id="status">Waiting</p>. The selector '#status' means “the element whose id is status.” In a browser script, const status = document.querySelector('#status'); either returns that paragraph element or null. The guard if (status) checks the latter case. Then status.textContent = 'Ready'; assigns text to the selected node. The resulting visible paragraph is Ready. This update does not create a new paragraph, does not react to an event, and does not interpret Ready as HTML; it modifies the text content of the already selected element.

Key takeaway

The DOM gives scripts a tree-shaped representation of a document. Select a specific node, handle the possibility that it is absent, and use a narrow update such as textContent when text is what you intend to change.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

What does the DOM provide to a browser script?

Choose an answer, then check it.
Question 2 of 3intermediate

A page has <p id="status">Waiting</p>. Which selector asks for that element?

Choose an answer, then check it.
Question 3 of 3foundational

What should code expect from document.querySelector('.missing') when no element matches?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define the DOM as a document representation exposed to scripts.
  • Identify parent, child, element, and text-node relationships in a DOM tree.
  • Use querySelector() to locate the first element matching a CSS selector.
  • Explain the difference between changing textContent and inserting HTML markup.
  • Apply a small, safe DOM update to a known element.

Common mistakes

  • Calling the DOM another name for HTML.

    HTML is markup; the DOM is the browser's in-memory object model built from a document.

  • Assuming querySelector() always returns an element.

    It returns null when no element matches, so check before using the result.

  • Expecting querySelector() to return every match.

    It returns the first matching element; use an API designed for multiple results when that is the goal.

  • Treating textContent as a way to parse markup.

    Use textContent for text; it does not ask the browser to interpret the assigned string as HTML.

Easily confused

HTML vs. DOM

HTML is markup text; the DOM is the browser's object representation of a document.

querySelector() vs. textContent

QuerySelector() finds an element; textContent reads or changes node text.

Key vocabulary

Document Object Model (DOM)
A browser API that represents a document's structure in memory as objects and nodes that scripts can access.
node
An item in the DOM tree, such as a document, element, text item, or comment.
element
A DOM node representing an HTML element, with properties and possible child nodes.
parent
A node that directly contains another node in the DOM tree.
child
A node directly contained by another node.
CSS selector
A pattern used to match elements; DOM selection APIs can use these patterns.
querySelector()
A Document method that returns the first element matching a specified CSS selector, or null when none matches.
textContent
A node property representing the text content of that node and its descendants.

Sources & references

  1. Document Object Model (DOM) — MDN Web Docs (Mozilla)
  2. Document: querySelector() method — MDN Web Docs (Mozilla)
  3. Node: textContent property — MDN Web Docs (Mozilla)
  4. Document: createElement() method — MDN Web Docs (Mozilla)

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.