1.5 O que é o DOM?

DOM ou Document Object Model é um padrão ou forma de representar objetos HTML que todos os navegadores web implementam. Ele é uma representação hierárquica das tags HTML, onde cada tag tem um nodo pai, podendo também ter um ou mais nodos filhos. Considere o código a seguir:

<html>

<head>

<title>DOM</title>

<meta charset="utf-8"/>

<meta name="keywords"

content="HTML,CSS,jQuery">

</head>

<body>

<h1>Título principal</h1>

<p>Um parágrafo descrevendo o conteúdo dessa página e uma

<a href="#">lista</a> com os principais tópicos abordados:</p>

<ul>

<li>Desenvolvimento web</li>

<li>JavaScript</li>

<li>jQuery</li>

</ul>

</body>

</html>

Quando o navegador web lê o código acima, ele na verdade cria uma representação desse código usando uma árvore de elementos hierárquicos:

Após o término da leitura do código, o navegador constrói o seu modelo que representa essa página, chamada de DOM. É a partir do DOM que o jQuery e JavaScript executam suas funções e permitem que o script navegue e localize elementos HTML. O propósito do DOM é oferecer uma interface programática para que scripts JavaScript possam adicionar, remover, substituir, modificar e monitorar os elementos HTML.

Pontos a serem observados:

1. A tag <html> é nó raiz, pois não possui um nodo pai.

2. Os nodos <title>, <meta>s, <h1>, <a> e <li>s são nodos

folhas, pois não possuem nodos filhos.

Com esse modelo fica fácil percorrer a árvore e localizar elementos. Por exemplo, tomando como referencial a tag body podemos inferir que:

1. o elemento <head> é irmão do elemento <body>

2. os elementos <h1>, <p> e <ul> são filhos diretos da tag

<body>

3. o elemento <html> é pai da tag <body> 4. o elemento <a> e as três tags <li> são descendentes indiretos

de <body>

OceanofPDF.com