DOM (Document Object Model)

The DOM (Document Object Model) is a tree of objects the browser builds from an HTML document, where every element, attribute and piece of text is a node. JavaScript uses the DOM API to read, add, change and remove those nodes.

Why it matters

The DOM is what the browser actually renders, and it can differ from the HTML your server sent. Scripts may insert content after load, which matters for debugging, testing and for crawlers that only read the raw HTML. Changing the DOM also triggers layout and painting, so heavy or repeated updates make pages sluggish.

Example

<p id="status">Checking...</p>
<script>
  document.getElementById('status').textContent = 'Site is up';
</script>

The script finds the node with id status and replaces its text. View Source still shows the original word, but the Elements panel in developer tools shows the new one.

Common mistakes

• Confusing View Source with the live DOM. Source is the file as delivered; the DOM is the current state.
• Querying and rewriting the DOM inside loops, forcing the browser to recalculate layout repeatedly.
• Running a script before the element exists, which returns null.

Related

• HTML Element
• Single-Page Application
• Hydration
• JavaScript Framework
• Tool: Meta tag checker

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.