![Page 1: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/1.jpg)
PROGRAMAÇÃO PARA INTERNET RICA
Prof. Dr. Daniel Caetano
2012 - 2
DHTML E O DOCUMENT OBJECT MODEL
![Page 2: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/2.jpg)
Objetivos
• Apresentar os conceitos do DHTML
• Conceituar a estruturação dos objetos do DOM
• Compreender as diferentes formas de acessar os elementos do DOM
• AV1!
![Page 3: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/3.jpg)
Material de Estudo
Material Acesso ao Material
Notas de Aula http://www.caetano.eng.br/ (Aula 8)
Apresentação http://www.caetano.eng.br/ (Aula 8)
Material Didático Aprenda a Criar Páginas Web c/ HTML, páginas 609 a 648
Google +“DOM” +tutorial
Web Sites http://www.w3.org/
![Page 4: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/4.jpg)
DHTML
![Page 5: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/5.jpg)
Introdução
• Já vimos intuitivamente
• DHTML = HTML Dinâmico
• Uso de JavaScript para...
– Manipular aparência
– Manipular conteúdo
• Aplicações Web
– Manipulação precisa e inteligente do HTML/CSS
![Page 6: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/6.jpg)
Introdução
• Manipulação precisa exige...
– Conhecimento da estruturação dos elementos
– Conhecimento das formas de acessá-los
– Conhecimento das formas de modificá-los
• Estruturação dos elementos: DOM
– Document
– Object
– Model
![Page 7: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/7.jpg)
O DOM: MODELO DE OBJETO DE DOCUMENTO
![Page 8: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/8.jpg)
Modelo de Objeto de Documento
• Maneira de estrutura um documento
– XML em geral... serve para HTML e XHTML
• Árvore de nós
– Cada nó é um elemento
– Cada nó pode conter outros nós
• Nó raiz
– document
![Page 9: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/9.jpg)
Modelo de Objeto de Documento
• Exemplo de Árvore DOM document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
![Page 10: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/10.jpg)
Modelo de Objeto de Documento document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
![Page 11: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/11.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 12: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/12.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 13: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/13.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 14: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/14.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 15: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/15.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 16: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/16.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 17: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/17.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 18: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/18.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 19: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/19.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 20: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/20.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 21: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/21.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 22: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/22.jpg)
Modelo de Objeto de Documento
document
html
head
title
Exemplo
body
h1 p
Título
Texto . em
simples
• Busca pelo <em>
![Page 23: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/23.jpg)
MANIPULANDO O DOM
![Page 24: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/24.jpg)
Manipulando o DOM
• As principais funções de manipulação são:
• getElementById(“id”) – Retorna um único elemento
– Existe apenas no objeto document
• getElementsByName(“nome”) – Retorna um vetor de elementos
– Existe apenas no objeto document
• getElementsByTagName(“tag”) – Retorna um vetor de elementos
– Existe em todos os elementos do DOM
![Page 25: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/25.jpg)
Manipulando o DOM
• getElementById - Exemplos
var tmp = document.getElementById(“artigo”);
tmp.style.backgroundColor = “red”;
var tmp2 = document.getElementById(“imagem”);
tmp2.src = “nova_imagem.jpg”;
![Page 26: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/26.jpg)
Manipulando o DOM
• getElementsByName - Exemplo
var tmp = document.getElementsByName(“cpf”);
if (tmp.length > 0) tmp[0].style.backgroundColor = “red”;
• Cuidado!
• No XHTML... name só em formulários!
![Page 27: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/27.jpg)
Manipulando o DOM
• getElementsByTagName - Exemplos
var tmp = document.getElementsByTagName(“p”);
if (tmp.length > 0) tmp[0].style.backgroundColor = “red”;
• OU
var artigo = document.getElementById(“artigo”);
var tmp = artigo.getElementsByTagName(“p”);
if (tmp.length > 0) tmp[0].style.backgroundColor = “red;
![Page 28: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/28.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• parentNode
– Retorna o nó “pai” do nó atual
body
p
Texto . i
simples
![Page 29: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/29.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• parentNode
– Retorna o nó “pai” do nó atual
• childNodes
– Uma matriz de todos os “filhos” do nó atual
body
p
Texto . i
simples
![Page 30: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/30.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• firstChild
– Primeiro “filho” do nó atual
body
p
Texto . i
simples
![Page 31: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/31.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• firstChild
– Primeiro “filho” do nó atual
• lastChild
– Último “filho” do nó atual
body
p
Texto . i
simples
![Page 32: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/32.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• nodeValue
– O valor do elemento atual
body
p
Texto . i
simples “Texto <i>simples</i> .”
![Page 33: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/33.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• nodeValue
– O valor do elemento atual
body
p
Texto . i
simples “simples”
![Page 34: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/34.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• nextSibling
– Elemento posterior
body
p
i
simples
em img
null
![Page 35: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/35.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• nextSibling
– Elemento posterior
body
p
i
simples
i em img
![Page 36: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/36.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• nextSibling
– Elemento posterior
• previousSibling
– Elemento anterior
body
p
simples
i em img
![Page 37: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/37.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• innerHTML
– Permite acrescentar um novo ramo ao elemento
– Pode-se escrever HTML normal, o navegador constrói tudo
![Page 38: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/38.jpg)
Manipulando o DOM
• Todo elemento DOM tem propriedades
• innerHTML
<h1 id=“a”>Teste</h1>
var tmp = document.getElementById(“a”);
tmp.innerHTML = “<em>Novo</em> teste”;
• Tem o efeito de...
<h1 id=“a”><em>Novo</em> teste</h1>
![Page 39: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/39.jpg)
Manipulando o DOM
• innerHTML
<h1 id=“a”>Teste</h1>
var tmp = document.getElementById(“a”);
tmp.innerHTML = “<em>Novo</em> teste”;
h1
Teste
h1
teste em
Novo
![Page 40: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/40.jpg)
Manipulando o DOM
• innerHTML é diferente de nodeValue!
<h1 id=“a”>Teste</h1>
var tmp = document.getElementById(“a”);
tmp.nodeValue = “<em>Novo</em> teste”;
h1
Teste
h1
<em>Novo</em> teste
![Page 41: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/41.jpg)
Manipulando o DOM
• innerHTML x nodeValue
– h1.innerHTML = “<em>Novo</em> teste”;
– h1.nodeValue = “<em>Novo</em> teste”;
h1
teste em
Novo
h1
<em>Novo</em> teste
![Page 42: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/42.jpg)
CRIANDO ELEMENTOS DOM
![Page 43: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/43.jpg)
Manipulando o DOM
• E para apenas acrescentar algo?
• document.createElement(“tag”) – Cria um elemento
– Função do objeto document
• document.createTextNode(“texto”) – Cria um elemento de texto
– Função do objeto document
• appendChild(filhote) – Acrescenta um filhote ao elemento atual
– Função de todos os elementos do DOM
![Page 44: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/44.jpg)
Manipulando o DOM var par = document.createElement(“p”);
var tex = document.createTextNode(“Oi!”);
par.appendChild(tex);
var div = document.getElementById(“artigo”);
div.appendChild(par);
p
“Oi!”
div
document
![Page 45: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/45.jpg)
Manipulando o DOM
• Mais algumas funções
• removeChild(elemento)
– Remove um filho do elemento atual
– Função de todos os elementos do DOM
• replaceChild(original, novo)
– Substitui um filho existente (original) por outro (novo)
– Função de todos os elementos do DOM
![Page 46: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/46.jpg)
MANIPULANDO O VISUAL PELO DOM
![Page 47: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/47.jpg)
Manipulando o Visual pelo DOM
• Duas formas de mudar propriedades visuais
• Modificando o atributo style dos elementos
– Cria/remove estilos inline no XHTML
– Basta alterar o atributo como temos visto
document.body.style.color = “blue”;
var tmp = document.getElementById(“local”);
tmp.style.backgroundColor = “yellow”;
![Page 48: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/48.jpg)
Manipulando o CSS pelo DOM
• Duas formas de mudar propriedades visuais
• Mudando a classe de um elemento
– Modificar o atributo “class” do elemento
var tmp = document.getElementById(“p1”);
tmp.className = “umaClasse”;
![Page 49: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/49.jpg)
Manipulando o CSS pelo DOM
• Para adicionar uma classe:
var tmp = document.getElementById(“p1”);
tmp.className = “umaClasse”;
(...)
tmp.className += “ outraClasse”;
• Atributo classes: “umaClasse outraClasse”
![Page 50: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/50.jpg)
Manipulando o CSS pelo DOM
• Para remover todas as classes:
var tmp = document.getElementById(“p1”);
tmp.className = “”;
• Para remover uma classe: complicado!
• className: “umaClasse outraClasse”
![Page 51: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/51.jpg)
COMO LER O CSS?
![Page 52: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/52.jpg)
Lendo o CSS com JavaScript
• Além dos estilos, podem ser lidos diretamente:
• offsetHeight
– Altura em pixels do elemento
• offsetWidth
– Largura em pixels do elemento
• offsetLeft
– Distância em pixels a partir do elemento da esquerda
• offsetTop
– Distância em pixels a partir do elemento de cima
![Page 53: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/53.jpg)
Lendo o CSS com JavaScript
• Mas você já deve ter observado que...
var cor = document.body.style.color;
window.alert(cor);
• Só imprime a cor se ela estiver inline
• Como fazer para atributos do arquivo CSS?
• Não existe uma forma padrão (unificada) de fazer isso...
![Page 54: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/54.jpg)
Lendo o CSS com JavaScript function getStyle( elem, estilo ) { var valor = “”; if (document.defaultView && document.defaultView.getComputedStyle) { valor = document.defaultView.getComputedStyle(elem,“”); valor = valor.getPropertyValue(estilo); } else if (elem.currentStyle) { estilo = estilo.replace(/\-(\w)/g, function(match,p1) { return p1.toUpperCase();}); valor = elem.currentStyle[estilo]; } return valor; }
![Page 55: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/55.jpg)
Lendo o CSS com JavaScript
• Como usar isso?
• É mais fácil do que parece:
var el = document.getElementById(“artigo");
var cor = getStyle(el,"background-color");
![Page 56: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/56.jpg)
TUTORIAL
![Page 57: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/57.jpg)
Jogo da Velha
• A) Região de Debug
• B) Janela de mensagens em HTML
• C) Placar (HTML5)
• D) Áudio (HTML5)
![Page 58: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/58.jpg)
CONCLUSÕES
![Page 59: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/59.jpg)
Resumo • DOM: acesso diretamo a elem. do XHTML
• O que fazer com DOM e seus elementos?
– Adicionar
– Criar
– Modificar
– Remover
• Acesso ao CSS: não padronizado, mas possível
• TAREFA
– AV1
![Page 60: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/60.jpg)
Próxima Aula
• Complicado!
– getElement... pouco prático!
–Buscas: Jquery!
![Page 61: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/61.jpg)
PERGUNTAS?
![Page 62: PROGRAMAÇÃO PARA INTERNET ICA E O DOCUMENT OBJECT … · Modelo de Objeto de Documento •Maneira de estrutura um documento –XML em geral... serve para HTML e XHTML •Árvore](https://reader035.vdocumento.com/reader035/viewer/2022070801/5f02643f7e708231d4040bb1/html5/thumbnails/62.jpg)
BOM DESCANSO A TODOS!