Tecnologia Web
Tecnologia Web
DOM
DOM
Anna Izabel João Tostes Ribeiro
Pontifícia Universidade Católica de Minas Gerais
Sumário
●
DOM
●
Hierarquia de nodos
●
Nodos especiais
DOM
●
Document Object Model
o É uma API (application programming interface) orientada a objetos para acessar e manipular um documento
o É independente de plataforma e linguagem
o Permite acesso a:
Conteúdo
Estrutura
Estilo
o É um padrão W3C, criado a partir da DHTML
o Composição:
Parts (Core, XML e HTML)
Levels (1, 2 e 3)
Níveis do DOM
●
Nível 1
o Contém funcionalidade para visualização e manipulação de documentos XML e HTML
●
Nível 2
o Adiciona suporte a folhas de estilo. Também oferece suporte a espaço de nomes (namespaces) e eventos, além de recursos mais sofisticados para manipulação das árvores.
●
Nível 3
o Especifica modelos para gerenciar DTDs e Schemas e para
validar documentos. Também especifica como salvar, carregar e formatar documentos, além de como criar visões e gerenciar
Nodos
●
No DOM, tudo é nodo:
o O documento (inteiro) é um nodo (document node) o Todo elemento é um nodo (element node)
o O texto dos elementos são nodos (text node) o Cada atributo é um nodo (attribute node)
o Os comentários são nodos (comment node)
●
A relação entre os nodos é semelhante a uma árvore
o Eles possuem elementos pai (parent) e filho (child)
o A raiz (document node) não possui pai, nem as folhas possuem filhos
Exemplo
<?xml version="1.0" encoding="iso-8859-1"?> <livraria>
<livro categoria="culinária" idioma="en"> <título>Everyday Italian</título> <autor>Giada de Laurentis</autor> <ano>2005</ano> <preço>30.00</preço> <disponibilidade quantidade="3"/> </livro>
<livro categoria="infantil" idioma="pt-br"> <título>Harry Potter</título> <autor>J.K.Rowling</autor> <ano>2005</ano> <preço>29.99</preço> <disponibilidade quantidade="15"/> </livro>
<livro categoria="web" idioma="pt-br">
<título>Internet & WWWW: Como programar</título> <autor>Harvey Deitel</autor> <autor>Paul Deitel</autor> <autor>Ramon Nieto</autor> <ano>2005</ano> <preço>79.80</preço> </livro> </livraria>
Hierarquia de Nodos
Elemento raiz: <livraria> Elemento: <livro> Pai Filho Atributo: categoria=“infantil” Atributo: idioma=“pt-br” Elemento: <título> Elemento: <autor> Elemento: <ano> Elemento: <preço> Texto: “Harry Potter” Texto: “J.K.Rowling” Texto: “2005” Texto: “29.99” Irmãos Elemento: <disponibilidade> Atributo: quantidade=“15” Elemento: <livro> Elemento: <livro> ... ...Hierarquia de Nodos
●
O nodo de mais alto
nível é chamado de
raiz
●
Cada nodo, exceto a
raiz, tem exatamente
um pai
●
Um nodo pode ter
qualquer número de filhos
●
Uma folha é um nodo sem
filhos
●
Irmãos são os nodos com o mesmo pai
Elemento raiz: <livraria> Elemento: <livro> Elemento: <livro> Elemento: <livro> nextSibling previousSibling lastChild firstChild parentNode childNodes (vetor) documentElement
Hierarquia de Nodos
●
O texto de um nodo
é também um nodo:
o nodo texto
●
O texto do elemento
fica armazenado como
valor do nodo texto
●
Os atributos também
são nodos, do tipo
atributo
●
Atributos não possuem pai
●
Atributos possuem um
nome e um valor
Elemento: <título> Texto: “Harry Potter” nodeName: “título” nodeValue: null nodeName: “#text” nodeValue: “Harry Potter”Elemento: <disponibilidade> Atributo: quantidade=“15” nodeName: “disponibilidade” nodeValue: null nodeName: “quantidade” nodeValue: “15” attributes (mapeamento)
Nodos Especiais
●
Nodo raiz: documentElement
●
Navegação a partir de um nodo qualquer
o Nodo pai: parentNode o Primeiro filho: firstChild o Último filho: lastChild
o Próximo irmão: nextSibling o Irmão anterior: previousSibling
Informações do Nodo
●
A propriedade nodeName retorna o nome do nodo (em
caixa alta)
o Se for um elemento, retorna o nome do elemento o Se for um atributo, retorna o nome do atributo o Se for texto, retorna #text
o Se for o nodo documento, retorna #document
●
A propriedade nodeValue retorna o valor do nodo
o Se for um elemento ou nodo documento, não funciona o Se for um texto, retorna o texto
Informações do Nodo
●
A propriedade nodeType retorna o tipo do nodo, sendo:
o Elemento = 1 o Atributo = 2 o Texto = 3 o ...
HTML DOM
●
Oferece acesso a um documento HTML como uma árvore
Elemento raiz: <html> Elemento: <body> Atributo: href=“...” Elemento: <title> Elemento: <a> Texto: “Meu título” Texto: “Meu link” Elemento: <head> Elemento: <h1> Texto: “Minha página”
HTML DOM
●
Objetos JavaScript
o Window – representa a janela do navegador
o Navigator – contém informações sobre o navegador o Screen – contém informações sobre a tela do cliente o History – contém os sites visitados
HTML DOM
●
Objetos HTML
o Document – representa um documento HTML e pode ser usado para acessar todos os outros elementos
o Outros: Anchor, Area, Base, Body, Button, Event, Form, Frame, Frameset, IFrame, Image, Input Button,
Input Checkbox, Input File, Input Hidden, Input Password, Input Radio, Input Reset, Input Submit, Input Text, Link, Meta, Object, Option, Select, Style, Table, TableCell, TableRow, Textarea
Parsers
●
Microsoft
o JavaScript:
var xmlDoc = new
ActiveXObject( "Microsoft.XMLDOM" );
xmlDoc.async = false;
xmlDoc.load( "livros.xml" );
o VBScript
set xmlDoc=CreateObject("Microsoft.XMLDOM")
o ASP
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
●
Mozilla
o var xmlDoc = document.implementation.createDocument( "", "", null); xmlDoc.load( "livros.xml" );Pesquisa de elementos
●
O método getElementsByTagName("elemento") ignora a
estrutura do documento e busca elementos com o nome
especificado
●
Retorna um vetor de nodos
●
Exemplo:
o var x=xmlDoc.getElementsByTagName("livro"); for (var i=0;i<x.length;i++)
{
// faz algo com cada elemento <livro> }
Lista de nodos
●
Uma lista de nodos é
retornada pela
propriedade childNodes
ou pelo método
getElementsByTagName()
●
O tamanho da lista é
determinado com a
propriedade length
●
Exemplo:
o getElementsByTagName("titulo")[0].childNodes[0].nodeValue o Retorna: Everyday ItalianElemento[0]: <título> Texto: “Everyday Italian” Elemento[1]: <título> Texto: “Harry Potter” Elemento[2]: <título> Texto: “Internet & WWW”
Pesquisa no HTML DOM
●
Alternativas:
o getElementsByTagName() – retorna uma lista de elementos o getElementById() – retorna um único elemento
Recuperação do texto de um elemento
●
Encontrar o elemento usando getElementsByTagName()
●
Exemplo
o xmlDoc=loadXMLDoc("livros.xml"); var x=xmlDoc.getElementsByTagName('title'); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write("<br />"); }Recuperação dos atributos
●
Recuperar cada atributo por seu nome usando o método
getAttribute()
●
Exemplo
o xmlDoc=loadXMLDoc("livros.xml"); var x=xmlDoc.getElementsByTagName('livro'); for (i=0;i<x.length;i++) { document.write(x[i].getAttribute('categoria')); document.write("<br />"); }Criação/atribuição de um atributo
●
Usar o método setAttribute( "nome", "valor" )
●
Exemplo
o xmlDoc=loadXMLDoc("livros.xml"); var x=xmlDoc.getElementsByTagName("livro"); for(i=0;i<x.length;i++) { x.item(i).setAttribute("edição","primeira"); }●
Ou o método createAttribute("nome")
●
Exemplo
o xmlDoc=loadXMLDoc("livros.xml"); var x=xmlDoc.getElementsByTagName('livro'); var newatt;for (i=0;i<x.length;i++) {newatt=xmlDoc.createAttribute("edição"); newatt.value="primeira";
x[i].setAttributeNode(newatt); }
Remoções
●
Remover um elemento – removeChild(nodo)
o Requer a especificação do nodo a ser removido
●
Remover um nodo atributo –
removeAttributeNode(nodo)
●
Remover o texto de um elemento –
deleteData( início, tamanho)
o Requer a especificação de onde começar a remover (0-based) e quantos caracteres
o O nodo deve ser texto
●
Remover diretamente um atributo –
Substituições
●
Substituir um nodo –
replaceChild( novo nodo, nodo velho )
●
Substituir um texto –
Criações
●
Criar um elemento – createElement(nome)
●
Criar um atributo – createAttribute(nome)
o A propriedade value do novo atributo permite definir seu valor
