The Document Object Model (DOM) is the structure a browser builds in memory from a web page. MDN calls it a programming interface that represents a document as a tree of nodes, so scripts can read and change its structure, style and content. It is a Web API and exists apart from the JavaScript language.
How does the DOM relate to HTML source code?
The HTML source is the text file delivered by the server. The browser parses it and builds the DOM. The source stays as it was sent, while the DOM can change after loading. MDN states that JavaScript modifications happen to the DOM and not to the original HTML. If a script adds a paragraph, that paragraph exists in the DOM and not in the source.
The tree consists of nodes. Element nodes represent tags, text nodes represent the text inside, and the document node is the root. The WHATWG DOM Standard defines the node trees, including shadow trees.
Why does the DOM matter for SEO?
Google processes JavaScript pages in three phases, crawling, rendering and indexing. For rendering it uses a headless Chromium that runs the scripts, and Google indexes what ends up in the rendered HTML. Content that only appears in the DOM after scripts run is visible to search only if rendering succeeds. Crawlers that do not execute JavaScript work with the source HTML alone, a point Google makes when it says not all bots can run JavaScript.
Example
Source HTML from the server:
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
DOM after app.js has run:
<body>
<div id="app"><h1>Running shoes</h1><p>Our range ...</p></div>
</body>
A crawler that does not run JavaScript only sees the first version.
How to look at the DOM
The Elements panel in the browser’s developer tools shows the live DOM. The source view shows the original HTML. Search Console’s URL Inspection tool shows the HTML as Google rendered it.
Common mistakes
- Checking only the source: Google indexes the rendered HTML. The source does not show what JavaScript adds.
- Content only after a user action: Google does not interact with the page. Content that enters the DOM only after a click or scroll may be missing from the index.
- Removing
noindexfrom the original HTML with JavaScript: If Google findsnoindexin the original HTML, it may skip rendering and JavaScript. Removing the tag with a script may then not work. - Conflicting canonical annotations: If JavaScript sets a canonical URL, it must match the value in the original HTML.
FAQ
What is the difference between HTML and the DOM? HTML is the text of the file, the DOM is the object tree the browser builds from it.
What is an example of the DOM? A script calling document.querySelectorAll("p") reads paragraph nodes from the DOM.
Sources
- Document Object Model – MDN Web Docsdeveloper.mozilla.org
- Introduction to the DOM – MDN Web Docsdeveloper.mozilla.org
- DOM Standard – WHATWGdom.spec.whatwg.org
- JavaScript SEO basics – Google Search Centraldevelopers.google.com
Last updated: