7.7 The DOM (Document Object Model) Tree | Web Application Development

When a browser loads an HTML page it builds a tree of objects in memory called the DOM. JavaScript can read and change this tree, and the page updates instantly.

HTML

<html>
  <body>
    <h1 id='title'>Hello</h1>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </body>
</html>

The tree for this page:

The DOM tree: element nodes (blue) and text nodes (green); document is the root

Every tag is an element node; text is a text node; attributes belong to elements.
Relationships: parent, child, sibling (ul is the parent of the li elements; the two li are siblings).
The top object is document. Everything starts from it.
Navigation properties: parentElement, children, firstElementChild, lastElementChild, nextElementSibling, previousElementSibling.

Try it: Open any website, press F12, open the Elements tab and expand the tree. Then in the Console type document.body.children and document.title.