etica

DOM – Document Oriented Model
• O Javascript consegue manipular qualquer aspecto do documento
HTML através do DOM.
• API (Linguagem Neutra) implementada pelo navegador.
• Outras linguagens Web (?)
• Objetos, propriedades e métodos para manipulação do HTML.
• DOM geralmente está associado ao DHTML (Dynamic HTML).

DOM
• O HTML é organizado como uma árvore hierárquica no DOM.
• Cada elemento do HTML é um objeto
NODE(nó).
•
•
•
•

Elementos (Element node).
Atributos (Atribute node).
Textos (Text node).
Comentários (Comment node).

DOM
• O conteúdo HTML é representando por um objeto nó DOCUMENT.
• Possui propriedade e métodos que nos dão acesso a seus sub nós.
• Todos os elementos são filhos do nó document. •
•
•
•
•

document.body document.title document.images document.write() document.getElementById()

DOM - Disponibilidade
• O Javascript só pode manipular seu HTML se ele estiver disponível.
• Para garantir isso use o evento onLoad.
• Ele dispara seu código quando o html for baixado.

function htmlPronto(){ alert(“pronto”); }

Selecionando elementos
• Para manipular seus elementos html você precisa encontrar a referência de sua tag (nó) dentro do objeto Document.
• Buscar por
•
•
•
•

ID
Nome do elemento
Classe
Tipo de elemento

• Algumas buscas retornar um array de elementos.
• Outros um único objeto node.

Buscar pela ID
• Busca um elemento pelo atributo id.
• Método getElementById(id_elemento)
• Retorna o único objeto node ou nulo.
Link
var no = Document.getElementById(“unico”);

Exercício
• Implemente o código de exemplo.

Buscar pelo tipo
• Busca um elemento pelo tipo de tag.
• H1, h2, p, ul, li...

• Método getElementsByTagName(“p”)
• Retorna uma array com os elementos encontrados.

var nos = Document.getElementsByTagName(“p”);

Exercício
• Implemente o código de exemplo.

Manipulando elementos
• Através da referência do objeto nó você controle seu