DOM

O DOM (Document Object Model) de uma página é o modelo de objetos dessa página e é também uma interface de programação dessa página.

Após carregar uma página, o browser cria uma árvores de objetos que representam a estrutura dos elementos de HTML dessa página: é o DOM.

No DOM todos os elementos de HTML são objetos de Javascript com propriedades, métodos e eventos.

Através de Javascript, podemos aceder a esses objetos, modificá-los, eliminá-los e até inserir novos objetos alterando dinamicamente o aspeto da página após ela ter sido carregada e sem necessidade de a recarregar.

Nós

No DOM tos os objetos são nós. O DOM é representado através de uma árvore de nós.

De acordo com o standard DOM da W3C, tudo num documento HTML é um nó:

O documento inteiro é um nó de documento.
Cada elemento de HTML é um nó de elemento.
O texto no interior dos elementos de HTML são nós de texto.
Cada atributo de HTML é um nó de atributo.
Os comentários são nós de comentário.

O tipo de nó é dado pela propriedade nodeValue em que :

1 – é Elemento de HTML
2 – é nome de atributo
3 – é um nó de texto
8 – é um comentário

O DOM vê os documentos HTML como estruturas em árvore. A estrutura é chamada Árvore de Nós.

Considere-se a seguinte página html:

<html> 
<head> 
<title>My title</title> 
</head> 
<body> 
<h1>My header</h1> 
<a href="#">My link</a> 
</body> 
</html>

A estrutura DOM da página acima é representada abaixo :

No DOM todos os nós da estrutura podem ser acedidos através de JavaScript. Todos os elementos de HTML (nós do tipo 1) podem ser modificados e nós podem ser criados e/ou eliminados.

Parents, children e siblings

Os nós numa Árvore de Nós têm uma relação hierárquica entre si.

Os termos parent, child e sibling são usados para descrever essas relações. Nós parent têm filhos (children). Nós children do mesmo nível são chamados siblings (irmãos).

Numa Árvore de Nós, o nó de topo é chamado root.
Cada nó tem exactamente um parent (pai) excepto a root (que não tem parent).
Um nó pode ter um número qualquer de children.
Siblings são nós com o mesmo parent.

A imagem seguinte ilustra parte de uma Árvore de Nós com a relação entre os nós:

Considere-se o seguinte fragmento de HTML:

<html> 
   <head> 
      <title>Manual de DOM</title> 
   </head> 
   <body> 
      <h1>Lição 1</h1> 
      <p>Olá mundo!</p> 
   </body> 
</html>

Do HTML acima:

O nó <html> não tem nó parent; É um nó root
O nó parent dos nós <head> e <body> é o nó <html>
O nó parent do nó de texto “Olá mundo!” é o nó <p>

• O nó <html> tem dois nós child: <head> e <body>

• O nó <head> tem um nó child: o nó <title>

• O nó <title> tem um nó child: o nó de texto “Manual de DOM”

• Os nós <h1> e <p> são siblings e nós child de <body>

• O elemento <head> é o primeiro child do elemento <html>

• O elemento <body> é o último child do elemento <html>

• O elemento <h1> é o primeiro child do elemento <body>

• O elemento <p> é o ultimo child do elemento <body>

O objeto document

O objeto document representa toda a página.

Se quisermos aceder a qualquer elemento de uma página, devemos começar sempre por aceder ao objeto document dessa página.

O objeto document possui métodos para encontrar elementos de uma página, assim como métodos para criar, eliminar e substituir elementos

Propriedades do objeto document

Propriedade	Descrição
anchors	Retorna uma coleção com todos os elementos <a>
body	Retorna o elemento <body>
documentElement	Retorna o elemento <html>
forms	Retorna uma coleção com todos os elementos <form>
head	Retorna o elemento <head>
images	Retorna uma coleção com todos os elementos <img>
referer	Retorna o URL do documento que carregou este documento
title	Retorna o titulo do documento
URL	Retorna o url do documento