Chapter 1HTML · Theory

The DOM Tree

The DOM (Document Object Model) is a tree structure the browser builds from your HTML. JavaScript uses this tree to read and change the page.

Chapter 1 of 10·core·fresher

When the browser reads your HTML file, it builds an internal tree of objects called the DOM (Document Object Model). Every HTML tag becomes a node in that tree. The root of the tree is the document node, which contains the html element, which branches into head and body, and so on.

There are several types of nodes. Element nodes represent HTML tags. Text nodes hold the text content inside elements. Attribute nodes represent things like class or id. The Document node is the top-level container. JavaScript uses the document API to work with these nodes — methods like querySelector, createElement, appendChild, and removeEventListener.

The DOM is live — any change you make through JavaScript appears on the page instantly. This is different from the virtual DOM that React uses. React keeps a lightweight copy of the tree in memory, figures out the smallest set of changes needed, and then applies them to the real DOM all at once for better performance.

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

Diagram: The DOM Tree