Você está na página 1de 8

Introdução HTML DOM

O HTML DOM define um padrão para acessar e manipular documentos


HTML.

O que você deve já saber


Antes de continuar você deve ter um conhecimento básico dos seguintes
procedimentos:

• HTML / XHTML

• Java script

O que é o DOM?

O DOM é um padrão W3C (World Wide Web Consortium).

O DOM define um padrão para o acesso a documentos como HTML e


XML.

"O W3C Document Object Model (DOM) é uma linguagem neutra e


interface da plataforma que permite que programas e scripts para acessar e
atualizar dinamicamente o conteúdo, estrutura e estilo de um documento."

O DOM é separado em 3 partes distintas / níveis:

• DOM Core - modelo padrão para qualquer documento estruturado

• XML DOM - modelo padrão para documentos XML

• HTML DOM - modelo padrão para documentos HTML

O DOM define os objetos e as propriedades de todos os


elementos do documento, e os métodos (interface) para acessá-los.

O que é DOM XML?

O XML DOM define os objetos e as propriedades de todos os


elementos XML e os métodos (interface) para acessá-los.
O que é HTML DOM?

O HTML DOM É:

• Um modelo de objeto padrão para HTML


• Uma interface de programação padrão para HTML
• Plataforma e linguagem independente
• Um padrão W3C

O HTML DOM define os objetos e as propriedades de todos os elementos


HTML, e os métodos (interface) para acessá-los.
Em outras palavras: O HTML DOM é uma norma para saber como obter,
alterar, adicionar ou excluir elementos HTML.

HTML nó de árvore DOM


O HTML DOM vistas um documento HTML como um nó de árvore. Todos
os nós da árvore têm relações entre si.

A Árvore nó HTML DOM

O HTML DOM vistas um documento HTML como uma estrutura de árvore.


A estrutura da árvore é chamado de nó de árvore.

Todos os nós podem ser acessados através da árvore. Seu conteúdo


pode ser modificado ou excluído, e novos elementos podem ser criados.

A árvore do nó abaixo mostra o conjunto de nós e as conexões entre


eles. A árvore começa no nó raiz e se ramifica para os nós de texto no nível
mais baixo da árvore:
Pais nó, os filhos e irmãos
Os nós na árvore de nós têm uma relação hierárquica entre si. Os termos
criança, pais e irmãos são usados para descrever as relações. Nós pais têm
filhos. Crianças no mesmo nível são chamadas de irmãos (irmãos ou irmãs).

• Em uma árvore de nós, o nó superior é chamado de raiz


• Cada nó, exceto a raiz, tem exatamente um nó pai
• Um nó pode ter qualquer número de filhos
• Uma folha é um nó sem filhos
• Os irmãos são os nós com o mesmo pai

A imagem a seguir ilustra uma parte da árvore de nós e da relação entre


os nós:

Olhe para o fragmento de HTML a seguir:


<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

• O nó <html> não tem um nó pai ; Ele é o nó raiz.

• O nó pai dos nos <head> e <body> é o no <html>.

• O nó pai do nó texto "Hello world!" é o no <p>

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

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

• O nó <title> só tem um nó filho: O nó texto "DOM Tutorial".

• Os nós <h1> e <p> são irmãos e nós filhos de <body>

First Child - Last Child


Primeiro filho e ultimo filho

• O elemento <head> é o primeiro filho do elemento <html>, e o


elemento <body> é o ultimo filho do elemento <html>.
• O elemento <h1> é o primeiro filho do elemento<body> e o
elemento<p> é o ultimo filho do elemento <body>

Nós HTML DOM

No DOM, tudo em um documento HTML é um nó.

DOM Nós
De acordo com o DOM, tudo em um documento HTML é um nó.
O DOM diz:

• Todo o documento é um nó de documento


• Cada elemento HTML é um nó de elemento
• O texto nos elementos HTML são nós de texto
• Cada atributo HTML é um nó de atributo
• Os comentários são nós de comentário

Exemplo DOM

Olhe para o documento HTML a seguir:

<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

O nó raiz no HTML é <html>.Todos os nós no documento estão contidos


em <html>.

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


Propriedades DOM HTML e Métodos

Propriedades e métodos definem a interface de programação do DOM


HTML.

Interface de Programação

No DOM, os documentos de HTML consistem de um conjunto de objetos


de nó. Os nós podem ser acessados com Java script ou outras linguagens de
programação. Neste tutorial vamos usar Java script.

A interface de programação do DOM é definida pelas propriedades e


métodos padrão.

 As propriedades são muitas vezes referidas como algo que é (ou


seja, o nome de um nó).

 Os métodos são muitas vezes referidos como algo que é feito (ou
seja, remover um nó).

Propriedades DOM HTML


Algumas propriedades DOM:

• x.innerHTML - o valor de x texto


• x.nodeName - o nome x
• x.nodeValue - o valor de x
• x.parentNode - o nó pai de x
• x.childNodes - os nós filho de x
• x.attributes - os atributos dos nodos x
Nota: Na lista acima, x é um objeto de nó (elemento HTML).

Métodos DOM HTML


Alguns métodos DOM:
• x.getElementById(id) - obtém o elemento com um id específico
• x.getElementsByTagName(nome) - obter todos os elementos
com um nome de marca especificada
• x.appendChild (nó) - inserir um nó filho para x
• x.removeChild (nó) - remove um nó filho de x
Nota: Na lista acima, x é um objeto de nó (elemento HTML).
A propriedade innerHTML

A maneira mais fácil de obter ou modificar o conteúdo de um elemento é


usando a propriedade innerHTML.
A innerHTML não é uma parte da especificação do DOM do W3C. No
entanto, é suportado por todos os principais navegadores.
A propriedade innerHTML é útil para a devolução ou substituição do
conteúdo de elementos HTML(incluindo <html> e <body>), ele também pode
ser usado para exibir a fonte de uma página que tenha sido modificado de
forma dinâmica.

Exemplo:

O código a seguir obtém o innerHTML (texto) a partir do elemento <p>


com id = "intro":
Exemplo

<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>
</body>
</html>
Nesse exemplo, getElementById é um methodo,While innerHTML é
uma propriedade.