Escolar Documentos
Profissional Documentos
Cultura Documentos
SIW Aula07
SIW Aula07
Web
Prof.:
Cssio
Prazeres
(prazeres@dcc.u:a.br)
DOM
e
DHTML
Introduo
(1)
DOM
(Document
Object
Model)
um
padro
W3C
denido
para
acessar
e
manipular
documentos
HTML
e
XML
"The
W3C
Document
Object
Model
(DOM)
is
a
pla<orm
and
language-neutral
interface
that
allows
programs
and
scripts
to
dynamically
access
and
update
the
content,
structure,
and
style
of
a
document."
Introduo
(2)
O
DOM
dene
os
objetos
e
as
propriedades
de
todos
os
elementos
do
documento,
e
os
mtodos
(interface)
para
acess-los
dividido
em
trs
diferentes
partes/nveis
Core
DOM:
modelo
padro
para
qualquer
documento
estruturado
XML
DOM:
modelo
padro
para
documentos
XML
HTML
DOM:
modelo
padro
para
documentos
HTML
e
XHTML
DOM
HTML
Modelo
de
objeto
padro
para
HTML
Interface
de
programao
padro
para
HTML
Independente
de
plataforma
e
linguagem
Vamos
usar
JavaScript
O HTML DOM um padro W3C para como obter, alterar, adicionar ou excluir elementos HTML
Ns
DOM
De
acordo
com
DOM
tudo
em
um
documento
HTML
um
n
Todo
o
documento
um
n
do
^po
document
Cada
elemento
HTML
um
n
do
^po
element
O
texto
em
elementos
HTML
um
n
do
^po
text
Todo
atributo
HTML
um
n
do
^po
aFribute
Comentrios
so
ns
do
^po
comment
Ns
texto
Texto
sempre
armazenada
em
ns
do
^po
texto
Um
erro
comum
no
processamento
do
DOM
o
de
esperar
um
n
de
elemento
conter
texto
O
texto
de
um
elemento
armazenado
em
um
n
texto
<^tle>DOM
Tutorial</^tle>
O
elemento
<^tle>
tem
um
n
texto
com
o
valor
"DOM
Tutorial
Ou
seja,
"DOM
Tutorial"
no
o
valor
do
elemento
<^tle>
rvore
de
ns
(1)
O
DOM
HTML
trata
um
documento
HTML
como
uma
estrutura
de
rvore
Chamada
node-tree
(rvore
de
ns)
rvore de ns (2)
Exemplo
<html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html>
O n <html> no tem n pai, o n raiz O pai dos ns <head> e <body> o n <html> <p> o n pai do n texto "Hello world! O n <html> tem dois ns lhos: <head> e <body> O n <head> tem um n lho: <^tle> O n <^tle> tem um n lho: o n texto DOM Tutorial Os ns <h1> e <p> so irmos, ambos lhos de <body>
Propriedades
e
mtodos
Denem
a
interface
de
programao
Documentos
HTML
consistem
de
um
conjunto
de
objetos
de
n
Os
ns
podem
ser
acessados
com
JavaScript
ou
outras
linguagens
de
programao
BODY
o
nome
do
n
<body>
remover
o
n
<body>
Algumas
propriedades
Dado
x,
um
objeto
n
que
um
elemento
de
HTML:
x.innerHTML:
o
valor
do
texto
do
n
x
Forma
mais
fcil
de
obter
ou
modicar
o
contedo
de
um
elemento
HTML
No
faz
parte
da
especicao
DOM
W3C
x.nodeName: o nome do n x x.nodeValue: o valor do n x x.nodeType: o ^po do n x x.parentNode: o n pai de x x.childNodes: uma lista com os ns lhos de x x.arributes: uma lista com os atributos de x
Alguns
mtodos
Dado
x,
um
objeto
n
que
um
elemento
de
HTML:
x.getElementById(id):
retorna
o
elemento
com
o
id
passado
como
parmetro
x.getElementsByTagName(name):
retorna
todos
os
elementos
com
um
determinado
nome
de
tag
x.appendChild(node):
insere
um
n
lho
no
n
x
x.removeChild(node):
remove
um
n
lho
de
x
http://www.w3schools.com/htmldom/dom_nodes_access.asp
Sugestes de leitura
Deitel,
P.
J.,
Deitel,
H.
M.
Ajax,
rich
internet
applica0ons
e
desenvolvimento
web
para
programadores.
Pearson,
1.
Edio,
2008.
Captulos
4
a
9