The Document Object Model (DOM) is a programming interface that represents a document as an ordered tree of objects called nodes. A browser builds this representation when it parses a page, and scripts—often JavaScript—can use DOM APIs to find, inspect, and change its content and structure. The DOM is not the HTML source, a screenshot, or a programming language.
How the DOM represents a document
Think of the DOM as a structured, object-based model of a document. In a web browser, parsing HTML produces a tree: a document object contains an html element, which contains a body element, which can contain headings, paragraphs, and other elements. Elements can themselves contain text nodes.
As an Amazon Associate I earn from qualifying purchases.
For example, a simplified page might be written as:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →<html>
<body>
<h1>Hello</h1>
<p>Welcome.</p>
</body>
</html>A simplified view of its DOM is:
Document
└── html
└── body
├── h1
│ └── Text: "Hello"
└── p
└── Text: "Welcome."This is a conceptual illustration, not a guarantee that the tree contains only the shown nodes. Whitespace in the source can also be represented in the tree, and browsers may account for document details omitted from a simplified example.
#1 Best Overall
What counts as a node?
A node is a general kind of object in the document tree; an element is only one kind of node. Common node types include:
- Document: the document-level object.
- DocumentType: information about the document type.
- Element: a markup element such as
<body>or<p>. - Text: text held within the document, including text inside an element.
- Comment: a comment represented in the document.
Nodes have relationships. A node can have a parent, children, and siblings. The tree is ordered, and traversal commonly follows tree order: a preorder, depth-first walk through nodes. APIs such as parentNode and childNodes let code navigate these relationships; children focuses on child elements rather than every child node.
DOM, HTML, and JavaScript are different things
| Concept | What it is | Typical role |
|---|---|---|
| HTML source | Markup text describing a document | Input that a browser parses |
| DOM | An object-based document model and its interfaces | A representation programs can inspect and manipulate |
| JavaScript | A programming language | A common language used to call browser DOM APIs |
| HTML DOM API | HTML-specific interfaces within the broader DOM ecosystem | Provides specialized interfaces and behavior for HTML elements |
These pieces work together, but they are not interchangeable. HTML source is not the DOM tree itself: the browser parses the markup to build a tree representation. JavaScript is not the DOM either; it is one language that can call the APIs a browser exposes. The DOM model is not limited to HTML documents, and formats such as SVG have relevant specialized interfaces.
Recommended Free Tools
The core DOM provides general document and node concepts. HTML-specific interfaces build on that foundation to represent HTML elements and their behavior. The WHATWG DOM Standard describes the broader model, including node trees, events, and aborting activities.
Rank #3
What code can do with the DOM
DOM APIs let code select nodes, read their properties, move through their relationships, and add, remove, or change content. For example:
const paragraphs = document.querySelectorAll("p");
paragraphs[0].textContent = "Updated text";querySelectorAll("p") asks the document for elements matching the CSS selector p. The next line sets the text content of the first matching element. This is browser-side JavaScript using DOM APIs; it is not a special feature of JavaScript by itself.
Rank #4
Attributes such as id and class provide data associated with an element. They are represented separately from the element’s child nodes, rather than being child nodes in the main tree.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallThe DOM is not the rendered page
The DOM describes document structure and content; it should not be treated as a screenshot or as a synonym for everything the browser draws. A page’s visual appearance depends on more than the DOM tree, and the DOM tree and visual rendering tree are not identical concepts. A screenshot records visible output at a moment in time; DOM APIs expose a structured representation that code can inspect or modify.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Capturing a page is different from reading its DOM
If your goal is to see what a page looks like, a screenshot service is a different tool from DOM APIs. ScreenshotNeo is a website screenshot API and MCP server for developers. It returns a screenshot or PDF; it does not replace DOM APIs for querying or changing a page’s nodes. Its clean-shot steps can accept consent banners and remove known consent platforms, newsletter popups, and chat widgets before capture, with each step configurable. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and other MCP clients.
Or skip the browser setup
One GET request can return a screenshot. This cURL example saves a WebP file:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The Free plan includes 1,000 shots per month with no card, and paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
