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
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.