The DOM: your page as a tree

The Document Object Model (DOM) is that tree. Every tag becomes an element object you can read and change from JavaScript. The root of it all is document.

Nesting in your HTML becomes family in the tree: an element inside another is its child, the outer one is its parent. Almost every DOM task has the same shape: find an element, then change it or listen to it.

<body>
  <h1 id="title">The Forge</h1>
  <ul class="tools">
    <li>Hammer</li>
    <li>Tongs</li>
  </ul>
</body>

• <ul> is a child of <body>; the two <li> elements are its children.
• The text inside a tag becomes a text node in the tree.
• Changing the DOM changes what's on screen: the HTML file itself stays the same.