HTML Document Object Model

Apresentação em tema: "HTML Document Object Model"— Transcrição da apresentação:

1 HTML Document Object Model

2 HTML DOM Ao interpretar o HTML o navegador irá criar uma estrutura em nós (grafo) de objetos que representam a janela do navegador e o documento HTML exibido A esta estrutura se da o nome de HTML DOM (Document Object Model) E um nó desta estrutura DOM node

3 HTML DOM Os navegadores seguem a especificação da W3C quanto a quais objetos devem ser criados e qual a estrutura deve ser mantida. O documento HTML, os elementos (tags), os atributos, os textos dentro dos elementos e os comentarios são DOM nodes O objeto que é a "porta de entrada" para DOM é o window

4 Objeto window Referência completa: Representa uma janela no navegador Sendo um objeto possui atributos e métodos que podem ser acessados com javascript Por representar a própria janela do browser pode ser omitido o nome da variável (window) no acesso de seus atributos e métodos.

5 Objeto window Alguns atributos e métodos: history location navigator
Retorna o objeto do histórico de navegação location Retorna o objeto que contem informações sobre a URL navigator Retorna um objeto que contem informações sobre o navegador alert(mensagem) Exibe uma caixa de alerta com uma mensagem e um botão de OK confirm(mensagem) Exibe uma caixa de dialogo com uma mensagem e um botão de OK e Cancela setTimeout(function/string, tempo) Chama uma função ou executa um código após um número de milisegundos eval(string) Processa código javascript representado em uma String

6 Objeto document Referência completa: Representa o documento HTML apresentado pelo navegador. É um atributo do objeto window. Então pode ser acessado diretamente por seu nome no código javascript É o "dono" de todos os outros objetos que representam o HTML carregado.

7 Objeto document Alguns atributos e métodos: document.body
Retorna o objeto que representa a tag body document.createAttribute() cria um atributo a ser utilizado em alguma tag document.createComment() cria um objeto que representa um comentário document.createTextNode() cria um objeto que representa um texto document.createElement() cria um objeto que representa um novo elemento (tag) document.write() ...

8 Manipulando DOM Referência completa: Alguns métodos/atributos de acesso: getElementById(id) getElementsByName(name) getElementsByTagName(tagName) childNodes nextSibling parentNode ...

9 Manipulando DOM Alguns métodos/atributos que permitem modificar o DOM
appendChild(elemento) removeChild(elemento) innerHTML ...

10 HTML DOM Events Referência completa Possibilita registrar eventos aos elementos do DOM do documento HTML Também padronizado pelo W3C É possível definir eventos diretamente nas tags <input type="button" value="botao" id="botao" evento="codigo javascript do evento"/> Ou acessando os objetos do DOM com javascript document.getElementById("botao").evento = function(evento){codigo javascript do evento}

11 HTML DOM Events Alguns eventos de mouse: Eventos de teclado: onclick
onmouseover onmouseout Eventos de teclado: onkeydown onkeypress onkeyup

12 HTML DOM Events Existem outros tipos de evento: form drag/drop
clipboard (ctrl + c / ctrl + v) print ...

13 Exercício da Calculadora
Implementar uma calculadora ultilizando as tecnologias de web front end apresentadas (HTML, CSS, Javascript). A tela da calculadora deve ser um div Utilizar botões para os números, "." (ponto), operadores ( / X - + = ) e para a função de limpar ("c")