🌳 The DOM: Building a Tree of Tags!
When your browser downloads an HTML file, it translates it into a tree model called the Document Object Model (DOM):
✨ If you change a leaf tag, the whole page structure updates instantly!
Example
Example
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>DOM Tree Visualizer</title>
6
<style>
7
body { font-family: sans-serif; background: #0f172a; color: #fff; padding: 24px; }
8
.tree-node { background: #1e293b; padding: 16px; border-radius: 8px; border-left: 4px solid #04AA6D; margin: 10px 0; }
9
.child-node { margin-left: 24px; border-left-color: #38bdf8; }
10
</style>
11
</head>
12
<body>
13
14
<div class="tree-node">
15
<strong><html> (Root Element)</strong>
16
<div class="tree-node child-node">
17
<strong><body></strong>
18
<div class="tree-node child-node" style="border-left-color:#f59e0b;">
19
<h1>Document Object Model Tree</h1>
20
<p><p>Every tag forms a live branch on the DOM tree.</p></p>
21
</div>
22
</div>
23
</div>
24
25
</body>
26
</html>