Clean β’ Professional
The HTML DOM (Document Object Model) is the foundation that allows JavaScript to interact with and manipulate web pages. When a web page is loaded, the browser automatically creates a DOM β a structured tree of objects that represents the entire HTML document.
Through the DOM, JavaScript gains the power to access, modify, add, or delete HTML elements and their attributes β enabling dynamic, interactive, and responsive web experiences.
The Document Object Model (DOM) is a W3C (World Wide Web Consortium) standard that defines how scripts can dynamically access and update the content, structure, and style of a web document. When a browser loads an HTML page, it converts the page into a tree-like structure of objects (nodes).
Each HTML element (like <h1>, <p>, <div>, etc.) becomes a node in this tree, and JavaScript can access and modify any of these nodes.
You can think of the DOM as a hierarchical tree:

Using the DOM, JavaScript can:
The W3C DOM standard is divided into three parts:
Imagine you have a button and a heading:
<h2 id="title">Welcome!</h2>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("title").innerHTML = "Hello, JavaScript DOM!";
}
</script>Β