What is the DOM in JavaScript?

The DOM (Document Object Model) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree of objects.

When a web page is loaded, the browser creates a live representation of the page’s structure in memory — the DOM. JavaScript can be used to manipulate this structure, enabling dynamic and interactive web content.

📄 DOM Structure Example

<html>
  <head></head>
  <body>
    <h1>Hello</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

This HTML gets represented as a tree of nodes. Each tag becomes a Node, and text inside elements becomes a TextNode.

🔎 DOM Terminology

Node – Every element, attribute, and piece of text is a node.
Element – A node representing an HTML element (e.g., <div>).
Parent/Child/Sibling – Nodes are connected in a tree structure.
Document – The root of the DOM tree (document object in JS).

⚙️ DOM Access via JavaScript

const heading = document.querySelector("h1");
console.log(heading.textContent); // "Hello"

📌 Why Learn the DOM?

Update content dynamically
React to user input/events
Manipulate styles and classes
Create interactive UIs

✅ In Summary: The DOM lets JavaScript talk to the HTML structure of a page. Mastering the DOM is essential for building interactive websites.

← Previous: Object Methods Next: Selectors →