Logo
Tutorials Articles Code Playground
Sign In Get Started
Module: DOM Fundamentals

DOM Tree

JavaScript Essentials: DOM Fundamentals - DOM Tree

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can read and manipulate the content, structure, and style. At its core, the DOM is a tree structure. Let's break down what that means.

What is the DOM Tree?

Imagine your HTML document as a family tree. Each element in your HTML becomes a node in this tree. The entire document itself is the root node.

  • Nodes: Everything in an HTML document is a node. This includes:

    • Element Nodes: HTML tags like <p>, <div>, <h1>, etc. These are the most common.
    • Attribute Nodes: Attributes within HTML tags, like id="myDiv" or class="highlight". (Technically, these aren't directly accessible as nodes in the same way as element nodes in modern JavaScript, but they are part of the overall DOM representation).
    • Text Nodes: The actual text content within HTML elements. For example, the "Hello World" inside <p>Hello World</p>.
    • Comment Nodes: HTML comments (<!-- This is a comment -->).

  • Root Node: The document object itself. This is the top-level node of the entire DOM tree.

  • Parent, Child, and Sibling Relationships: Nodes are connected to each other in a hierarchical way:

    • Parent: The node directly above a given node in the tree.
    • Child: The node(s) directly below a given node in the tree.
    • Sibling: Nodes at the same level in the tree (sharing the same parent).

Example

Let's consider this simple HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a paragraph.</p>
  <div id="myDiv">
    <p>This is a paragraph inside the div.</p>
  </div>
</body>
</html>

The corresponding DOM tree would look conceptually like this:

document (Root)
  ├── html
  │   ├── head
  │   │   └── title (Text: "My Page")
  │   └── body
  │       ├── h1 (Text: "Welcome")
  │       ├── p (Text: "This is a paragraph.")
  │       └── div (id="myDiv")
  │           └── p (Text: "This is a paragraph inside the div.")

Explanation:

  • document is the root.
  • html is a child of document.
  • head and body are children of html.
  • title is a child of head.
  • h1, p, and div are children of body.
  • The second p is a child of div.
  • The text content within each element is represented as a text node (child of the element node).

Why is the DOM Tree Important?

  • JavaScript Access: JavaScript uses the DOM to access and manipulate HTML elements. You can use JavaScript to:

    • Change the content of elements.
    • Modify the attributes of elements.
    • Add, remove, or rearrange elements.
    • Respond to user interactions (like clicks and form submissions).

  • Dynamic Web Pages: The DOM allows you to create dynamic web pages that change in response to user actions or data updates.

  • Frameworks & Libraries: Popular JavaScript frameworks and libraries (like React, Angular, and Vue.js) heavily rely on the DOM to efficiently update and manage the user interface.

Common DOM Properties & Methods

Here are some key properties and methods for navigating the DOM tree:

  • document.documentElement: Returns the root element of the document (usually <html>).
  • document.body: Returns the <body> element.
  • element.parentNode: Returns the parent node of an element.
  • element.childNodes: Returns a live NodeList of the element's child nodes.
  • element.children: Returns an HTMLCollection of the element's element children (only element nodes, not text or comment nodes).
  • element.firstChild: Returns the first child node.
  • element.lastChild: Returns the last child node.
  • element.nextSibling: Returns the next sibling node.
  • element.previousSibling: Returns the previous sibling node.
  • document.getElementById(id): Returns the element with the specified id attribute.
  • document.getElementsByClassName(className): Returns a live HTMLCollection of elements with the specified class name.
  • document.getElementsByTagName(tagName): Returns a live HTMLCollection of elements with the specified tag name.
  • document.querySelector(selector): Returns the first element that matches the specified CSS selector.
  • document.querySelectorAll(selector): Returns a static NodeList of all elements that match the specified CSS selector.

Live vs. Static Collections

It's important to understand the difference between NodeList and HTMLCollection:

  • HTMLCollection: A live collection. This means that if the DOM changes (e.g., you add or remove an element), the HTMLCollection is automatically updated.
  • NodeList: Can be either live or static. querySelectorAll returns a static NodeList, meaning it doesn't automatically update when the DOM changes. childNodes can return a live NodeList depending on the browser.

Understanding this distinction is crucial to avoid unexpected behavior when manipulating the DOM.

Resources

This overview provides a foundational understanding of the DOM tree. As you progress in JavaScript, you'll learn more advanced techniques for manipulating the DOM to create interactive and dynamic web applications.