O Navegador e o DOM

Conhecendo a Árvore de Família do seu site.

A Planta da Casa e o Mestre de Obras

Imagine que você quer construir uma casa. O seu código HTML é a planta desenhada no papel. O Navegador (Chrome, Edge, Safari) é o mestre de obras.

Quando o mestre de obras lê a sua planta, ele cria um mapa mental de hierarquia: "A janela fica dentro da parede, que fica dentro do quarto, que fica dentro da casa".

Na web, esse mapa estrutural que define quem é "pai" de quem se chama DOM (Document Object Model).

Explore a linhagem dos elementos

Passe o mouse por cima do código para ver como o navegador identifica não só o elemento, mas também todos os seus ancestrais (pais, avós, etc).

<html>

<head>

</head>

<body>

</header>

<main>

<p>Bem-vindo!</p>

</main>

</body>

</html>

Árvore do DOM

html

head

body

header

main