What is the DOM Tree?

The Document Object Model tree, or simply, the DOM tree is:

A representation of the relationship between content in an HTML document.

Each thing in an HTML document is related to one another by a means of connections laid out in this tree.

Starting from literally any element, you can go to any other element in the whole DOM by means of traversal (moving up or down the connective links between elements).

Let's take the example of the following document and show you a simple picture of its DOM tree.
<!DOCTYPE html>
        <meta charset="utf-8" />
        <title>DOM Tree</title>
        <!-- A comment -->
        <p>A paragraph</p>
        <div>A div</div>
A simple DOM Tree picture

First we have the whole document object sitting at the top of the tree known as the root.

Then we have the html element as the child of the root. Its parent is document. The children of html include head and body. head and body are siblings to each other.
  1. head element has children meta and title
  2. body element has children p and div
And in this way you have the whole document condensed into a hierarchy of objects known as the Document Object Model Tree.


What we've just seen was a simple depiction of the DOM tree. We simplified objects as being elements. The objects in the DOM tree are actually called nodes. We have the root node, element nodes, text nodes, comment nodes. A much complex and detailed picture of the DOM tree would've been this:
A complex node DOM Tree picture

The root node is the document object. Its child nodes are !Doctype html and thehtml element node whose parent node is the document object.

The child nodes of html include head and body. The text nodes empty are at the indentations and line breaks in the above HTML code, like for example after the html opening tag and before the meta opening tag. Technically speaking they aren't empty i.e they have spaces and new line characters but for simplicity we named them so.

Skipping the head tag, the child nodes of body include a comment node with node value  A comment  and two element nodes - p and div

p has a text node with node value A paragraph. div has a text node with node value A div.

And we are done with the explanation of nodes! Remember the parent-child relationship between nodes. All the direct children of an element have the same parent which is the element itself.

The document object

The document object is the essence of HTML DOM. It is the root node and holds the entire document in it. All the useful stuff i.e the methods and properties are available on it and its children. You can't do any single thing to any single element without refering to the document object. It is the global-scoped king of the DOM.

In the coming chapters all the properties and methods we show you will be performed starting from the document object.