The DOM, or Document Object Model, is the in-memory representation of an HTML or XML document used by browsers. When a page loads, the browser parses the markup and constructs a tree of elements, attributes, and text nodes. JavaScript can interact with the DOM to read or modify content, update styles, and handle user interactions. The DOM allows dynamic behavior in modern web applications and forms the foundation for frontend frameworks.
Why it matters
Understanding the DOM is essential for frontend development. Every button click, form input, or layout update ultimately interacts with the DOM. Many performance issues—such as slow rendering or layout thrashing—result from inefficient DOM manipulation.
Examples
Calling document.querySelector to retrieve an element or modifying element.textContent are common DOM operations. Lessons like Adding Interactivity With JavaScript show how the DOM is used in practice.