Synonyms: Document model Webpage structure
DOM stands for Document Object Model, a programming interface that represents the structure of a webpage or document. When a browser loads a webpage, it creates a DOM that organizes the HTML or XML content into a tree-like structure where each element (like a paragraph, image, or link) is a node.
The DOM allows developers to interact with and manipulate a webpage’s content and structure dynamically, using languages like JavaScript. For instance, you can change text, hide or show elements, and respond to user input (such as clicks) in real-time by modifying the DOM.
Here’s how the DOM works:
- Hierarchy: It represents the document as a hierarchy of objects (nodes), starting with the root
<html>
element and branching down to child elements like<body>
,<div>
, and<p>
. - Interactivity: JavaScript can use the DOM to select, modify, or create elements, allowing for dynamic web content.
- Event Handling: The DOM also enables event-driven programming, where actions like clicks or keypresses trigger changes on the webpage.
In short, the DOM bridges the gap between the structure of a webpage and the way users interact with it.