DEV Community

Cover image for Understanding the DOM Tree: A Beginner's Guide to Understanding Web Page Structure
gautam kumar
gautam kumar

Posted on

Understanding the DOM Tree: A Beginner's Guide to Understanding Web Page Structure

The DOM (Document Object Model) is a representation of an HTML document as a tree structure. It allows programming languages (like JavaScript) to interact with, modify, and manipulate web pages dynamically.

What is the DOM Tree?

Imagine a webpage as a family tree where:

  • The entire document (HTML) is the root.
  • Different parts of the document (head, body, elements) are like branches and leaves.
  • Each element inside the page is a node in this tree.

How the DOM Tree Represents the HTML

Example 1: With new line and space

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
Document
├── html
   ├── head
      ├── title
         └── "My Page"
      └── "\n  "
   ├── "\n  "
   └── body
       ├── "\n    "
       ├── h1
          └── "Hello, World!"
       ├── "\n    "
       ├── p
          └── "This is a paragraph."
       └── "\n  "
└── "\n"
Enter fullscreen mode Exit fullscreen mode

you can see for each new line there is a TextNodes "\n "

Example 2: Without and new line and space

<html>
  <head><title>My Page</title></head><body><h1>Hello, World!</h1><p>This is a paragraph.</p></body>
</html>
Enter fullscreen mode Exit fullscreen mode
                [Document]
                    |
                <html>
                /     \\
          <head>       <body>
             |             |
          <title>         <h1>     <p>
             |              |       |
        "My Page"     "Hello,..." "This is..."

Enter fullscreen mode Exit fullscreen mode

In this scenario, there are no new lines (TextNodes)

Breaking it down:

  1. Root Node: Document – The whole page (browser creates it automatically).
  2. Element Nodes: <html>, <head>, <body>, <h1>, <p> – Represent HTML tags.
  3. Text Nodes: Inside elements, like "\n ", "My Page", "Hello, World!", and "This is a paragraph."
  4. Attributes (not shown in tree): Elements can have attributes like id, class, etc.

Types of Nodes in the DOM Tree

The DOM tree consists of different types of nodes:

  1. Document Node: Represents the entire document (document in JS).
  2. Element Nodes: HTML elements (e.g., <body>, <h1>, <p>).
  3. Text Nodes: Text inside elements (e.g., "\n ", Hello, World!).
  4. Attribute Nodes: Represent element attributes (e.g., class="example").
  5. Comment Nodes: Represent HTML comments (<!-- This is a comment -->).

Accessing the DOM Using JavaScript

JavaScript allows us to manipulate the DOM using methods like:

1. Accessing Elements

console.log(document.documentElement); // Gets <html> element
console.log(document.body);            // Gets <body> element
console.log(document.title);           // Gets page title
Enter fullscreen mode Exit fullscreen mode

2. Selecting Specific Elements

const heading = document.querySelector('h1'); // Select <h1>
console.log(heading.textContent);  // Output: Hello, World!
Enter fullscreen mode Exit fullscreen mode

DOM Tree Relationships

The DOM tree has relationships between nodes:

  1. Parent Node: A node that contains other nodes inside it.
    • Example: <body> is the parent of <h1> and <p>.
  2. Child Nodes: Nodes inside a parent node.
    • Example: <h1> and <p> are children of <body>.
  3. Sibling Nodes: Nodes at the same level under the same parent.
    • Example: <h1> and <p> are siblings.

Example (Relationships)

<html>
  <head></head>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Parent: <html>
  • Children: <head>, <body>
  • Siblings: <h1> and <p>

Get different elements

const rootElement = document.getRootNode(); // To get the root node
console.log(rootElement); // Output: #document object

const childNodesOfRoot = rootElement.childNodes;  // To get all the child nodes of any Element
console.log(childNodesOfRoot) // Output: #html object

const childNodesOfHTML = childNodesOfRoot[0].childNodes;  // To get all the child nodes of any Element
console.log(childNodesOfHTML) // Output: #head object,  #textNode("\n ") object,  #body object

Enter fullscreen mode Exit fullscreen mode

Conclusion

  • The DOM represents the structure of an HTML document in a tree format.
  • JavaScript can be used to manipulate the DOM to update content dynamically.
  • Understanding DOM relationships helps in selecting and modifying elements easily.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay