Suggest an edit

Improve this article

Refine the answer for “What does "tree of elements" mean?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The **"tree of elements" (or DOM tree)** is the **internal structure** the browser builds when it reads HTML code.
It shows **which elements are on the page and how they relate to each other**: who is the "parent", the "child element" and so on.

---

### What this means in practice

The browser does not just see text with tags like:

```html
<body>
  <h1>Hello</h1>
  <p>This is an example</p>
</body>
```

It turns it into a **hierarchy of objects**, where each tag is a **node of the tree**.

Visually it looks like this:

```javascript
html
 └── body
      ├── h1
      │    └── "Hello"
      └── p
           └── "This is an example"
```

---

### Why it is called a "tree"

- The **root** has one main element: `<html>`.
- It has **branches**: `<head>` and `<body>`.
- Inside them are **child elements**: headings, paragraphs, links and so on.
- Each tag can contain **other tags or text**, forming a structure similar to a **branching tree**.

---

### How the browser uses this tree

The browser turns HTML into the **DOM (Document Object Model)**:
a special object that **JavaScript** can work with.

For example:

```javascript
document.body.style.background = "lightblue";
```

Here `document` is the whole tree of the page,
and `body` is one of its nodes, which we access directly.

---

### A simple analogy

Think of an HTML page as a **family tree**:

- The parent `<body>` has children `<h1>` and `<p>`.
- `<h1>` has a "descendant": the text "Hello".
- They are all connected, and if you change the parent, what is inside it changes too.

---

### Summary:

| Concept | What it means |
|---|---|
| **Tree of elements** | The structure showing how tags are nested inside one another |
| **DOM (Document Object Model)** | The technical implementation of this tree inside the browser |
| **Node** | Each HTML element is a separate "branch" of the tree |

---

**In simple terms:**
The "tree of elements" is a **map of the HTML page** that the browser builds in order to **understand its structure and be able to work with it**.
Thanks to this, JavaScript can "reach" any element and change the page on the fly.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts366 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.