The DOM Tree

The DOM (Document Object Model) is a programming interface that represents an HTML or XML document as a tree of node objects. The root is the document node, which contains the html element, which branches into head and body, and so on.

Node types include: Element nodes (HTML tags), Text nodes (text content), Attribute nodes (element attributes), Comment nodes, and the Document node itself. JavaScript interacts with the DOM through the document API — querySelector, createElement, appendChild, removeEventListener, etc.

The DOM is live — modifying it through JavaScript immediately affects what the browser renders. This is in contrast to the virtual DOM used by frameworks like React, which batch updates and apply them efficiently.

document
└── html
    ├── head
    │   ├── title
    │   │   └── "My Page" (Text)
    │   └── link
    └── body
        ├── header
        │   └── nav
        └── main
            ├── article
            └── aside