What does "tree of elements" mean?
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:
<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:
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:
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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.