Embed Size (px)
Citation preview
O Modelo de Objectos do
Documento (DOM). Acesso e
manipulação dos objectos do
DOM.
Conferencia 8
MSc. Yoenis Pantoja Zaldívar
Programação Web
Aspeitos gerales do DOM.
Métodos e propriedades para o acesso e
manipulação dos objectos do DOM.
O Modelo de Objectos do Navegador
(Browser Object Model, BOM)
Resumo
Caracterizar o DOM, mediante seus
principais métodos e propriedades para
manipular os conteúdos de documentos
HTML.
Identificar os principais objectos do
navegador, útiles para a programação de
aplicativos Web.
Objectivos
Eguíluz Pérez Javier, Introducción a
JavaScript. Capítulo 5. Disponible em:
http://progwebisutic.wordpress.com
Eguíluz Pérez Javier, Introducción a
AJAX. Capítulos 4 e 5. Disponible em:
http://progwebisutic.wordpress.com
W3C, Document Object Model (DOM).
Disponible en: <http://www.w3.org/DOM/>
Bibliografía
“(…) é uma API para acceder, inserir e
mudar dinámicamente conteúdo
estruturado em documentos com Javascript”
Document Object Model (DOM)
Wikipedia, Document Object Model. Disponible en:
http://es.wikipedia.org/wiki/Document_Object_Model
“(…) plataforma que proporciona um
conjunto estándar de objetos através da qual
podem-se criar documentos HTML e XML,
navegar por sua estrutura e, modificar,
inserir e apagar tanto elementos como
conteúdos (…)”
Document Object Model (DOM)
W3C, El W3C de la A a la Z. Disponible en:
http://www.w3c.es/divulgacion/a-z/
Na programação de aplicativos Web
podemos:
– Obter o valor armazenado por alguns
elementos.
– Criar elementos de forma dinámica e
inserirlos ao documento. Eliminar existentes.
– Manipulação interactiva de conteúdos
(ocultar/mostrar, desplazar, etc.)
Importância del DOM
Uma página (X)HTML não é mais que
uma sucesão de caracteres (formato difícil
de manipular).
DOM transforma os documentos (X)HTML
num conjunto de nodos interconectados
que representan os conteúdos e as
relações entre eles (conhecido como
árvore de nós).
Importancia del DOM
1. A raíz sempre é a mesma: um nó de tipo
especial denominado “document”.
2. A partir do nó raíz cada etiqueta HTML
transforma-se num nó de tipo “Element”
que deriva do nó correspondente á sua
“etiqueta pai”.
Regras para a transformação
3. As etiquetas HTML habituais generan 2
nós:
– Propria etiqueta (de tipo “Elemento”)
– Texto conteúdo (de tipo “Texto”)
4. Se uma etiqueta é filha de outra sigue-se
o procedimiento anterior, siendo filhos de
seu nó pai.
Regras para a transformação
Principais tipos de nós
Document Element
Nó raíz
Attr Text
Cada etiqueta HTML, único nó
que contém atributos.
Cada atributo de uma etiqueta
HTML.
Cada texto conteúdo numa
etiqueta HTML.
Que nós generam-se a partir de cada umo
dos códigos seguintes?
Exercicio 1
<title>Minha pagina</title>
<p class=“conselho”>Protege tua vida</p>
<p class=“conselho”><em>Protege</em> tua vida</p>
Construia o árvore de nós.
Exercicio 2
<html>
<head>
<title>O combatente</title>
</head>
<body>
<h1 class=“c1”>Sempre presente</h1>
<p>Seu exemplo <strong>vive</strong></p>
<body>
<html>
Acesso á os nós
O acesso á os nós, sua modificação e
sua eliminação só é posível quando o
árvore DOM foi construido previamente
de forma completa.
Acesso pelos nós
pais
Acesso directo
(uso de funções)
Acesso pelos nós pais
document.forms[index].elements[index]
var meuFormulario = document.forms[0];
var meuElemento = meuFormulario.elements[0];
<form name="frm1">
<input type="text" name=“elem1" />
</form>
<form name=“frm2">
<input type="text" name=“elem2" />
</form>
var meuFormulario = document.frm2;
var meuElemento = meuFormulario.elem2;
<form name="frm1">
<input type="text" name=“elem1" />
</form>
<form name=“frm2">
<input type="text" name=“elem2" />
</form>
document.nomeformulario.nomeelemento
Acesso pelos nós pais
getElementsByTagName()
Acesso pelo nome da etiqueta. Devuelve um array com
os elementos .
getElementsByName()
Acesso mediante o atributo ‘name’ da etiqueta.
Devuelve um array com os elementos .
getElementById()
Acesso mediante o atributo ‘id’ da etiqueta.
Acesso directo - Métodos
<><>/*Acesso á todos os links do primeiro parágrafo do
documento*/
var pgfos = document.getElementsByTagName("p");
var primeiroPgfo = pgfos[0];
var links = primeiroPgfo.getElementsByTagName("a");
alert(“No primeiro parágrafo há ” + links.length + “ links.”)
Acesso directo - Exemplo
<><>/*Acceso por el nombre*/
var rbnCores = document.getElementsByName(“cor”);
Acesso directo - Exemplo
/*Código HTML*/
<input id=“r1” name=“color” type=“radio” value=“R” />
<label for=“r1”>Vermelho</label>
<input id=“r2” name=“color” type=“radio” value=“V” />
<label for=“r2”>Verde</label>
<input id=“r3” name=“color” type=“radio” value=“A” />
<label for=“r3”>Azul</label>
<><>/*Acesso á um elemento pelo id*/
var cIdade = document.getElementById (“idade”);
alert(cIdade.value);
Acesso directo - Exemplo
/*Código HTML*/
<input id=“nome” name=“nome” type=“text” />
<label for=“nome”>Nome</label>
<input id=“idade” name=“idade” type=“text” />
<label for=“idade”>Idade</label>
Criar nós - Pasos
1. Criar nó de tipo Element.
2. Criar nó de tipo Text (conteúdo do
elemento).
3. Adicionar o nó Text como filho do nó
Element.
4. Adicionar o nó Element como filho do nó
donde quere-se inserir.
document.createElement(“etiqueta”)
Método para criar nó de tipo Element .
document.createTextNode(“conteúdo”)
Método para criar nó de tipo Text.
nodoPadre.appendChild(nóFilho)
Método para adicionar o noFilho como filho de nóPai.
Criar nós – Métodos
<><>/* Criar e adicionar um parágrafo á página
com o texto “Angola 2016”*/
// Criar nó de tipo Element
var noP = document.createElement("p");
// Criar nó de tipo Text
var noTextoP = document.createTextNode(“Angola 2016");
// Adicionar o nó Text como filho do nó Element
noP.appendChild(noTextoP);
// Adicionar o nó Element como filho da página
document.body.appendChild(nodoP);
Criar nós - Exemplo
noPai.removeChild(noFilho)
Método para eliminar um nó Filho. Debe ser invocado
pelo nó Pai.
no.parentNode
Propriedad que permite aceder ao nó pai.
Eliminar nós – Métodos
<><>// Para eliminar o campo de texto…
// Aceder ao elemento pelo id
var txtAutor = document.getElementById(“txt_autor”);
// Acceder ao nó pai para invocar á removeChild()
txtAutor.parentNode.removeChild(txtAutor);
Eliminar nós - Exemplo
// Código XHTML<div>
<label>Autor:</label><input id=“txt_autor” name=“txt1” type=“text” />
</div>
no.getAttribute(nomeAtributo)
Método para obter o valor de um atributo através de
seu nome.
no.setAttribute(nomeAtributo, valor)
Método para estabelecer ou mudar o valor de um
atributo ao nó.
DOM – Outros métodos
Outra forma: no.nomeAtributo = valor (no
caso do atributo class há que usar
className)
<><>// Para asignar uma classe CSS…
// Aceder ao elemento pelo id
var titulo = document.getElementById(“titulo_principal”);
// Asignar a classe CSS
titulo.setAttribute (“class”, “no-mostrar”);
Modificar atributos - Exemplo
// Fragmento de código XHTML
<h1 id=“titulo_principal” class=“encabezado1”>
Festival de Artistas Aficionados</h1>
// Fragmento de código CSS
.no-mostrar { display: none; }
Permite criar, mover, redimensionar e
fechar janelas do navegador.
Obter informação sobre o propio
navegador.
Propriedades da página actual e da
ecrã do usuario.
Browser Object Model (BOM)
Principais objectos do BOM
window document forms
history
location
images
links
navigator location
Descripção Sintaxis
open Abrir janelas win = window.open( url, name, attrb);
close Fechar janelas win.close();
alert Abre uma janela Alert win.alert();
statusTexto na barra de
estadowin.status = “mensagem na barra”;
prompt Abre janela prompt win.prompt (dados, val_inicial);
print Imprime o documento win.print
window
Descripção Sintaxis
writeEscreve no
documentodocument.write(dado)
writelnEscreve e salta de
lenhadocument.writeln(dado)
alinkColorCor de link sem
usardocument.alinkColor = cor;
linkColor Cor de link activo document.linkColor = cor;
vlinkColor Cor de link visitado document.vlinkColor = cor
locationurl do documento
actualurl = document.location;
document
Descripção Sintaxis
backVuelve á página
anteriorwindow.history.back();
forward Página seguinte window.history.forward();
go(valor)
Segundo o valor
leva ás páginas
seguintes ou
anteriores.
window.history.go(valor);
history
Descripção Sintaxis
hrefLa URL completa
de la página actuallocation.href = “http://intranet.uci.cu”
location
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
setTimeout("location.href='http://www.google.com';“,5000);
</script>
</head>
<body></body></html>
O Modelo de Objectos do
Documento (DOM). Acesso e
manipulação dos objectos do
DOM.
Conferencia 8
MSc. Yoenis Pantoja Zaldívar
Programação Web
