Document Object Model

Professor Cleuton Sampaio de Melo Jr - Javascript
Document Object Model

Como acessar os elementos do documento HTML
Bem, para comear, o Document Object Model ou DOM uma API que permite aos
programadores acessar e modificar o contedo de documentos !M" ou #M"$ %sando
o DOM &oc' pode interagir com os campos de formul(rio ou com os elementos )di&*
de sua p(gina !M"$
Infeli+mente ,( diferenas significati&as entre a implementa-o DOM do Microsoft
Internet ./plorer e do 0irefo/$ Mas d( para &ermos o b(sico e lidarmos com as
diferenas conforme surgirem$
1ote que s2 estou mencionando os dois principais bro3sers do mercado$ Isto
proposital$ De&emos trabal,ar para a maioria e n-o para a minoria$ 4e algum usa
bro3ser diferente ou desabilita o 5a&ascript porque n-o quer utili+ar os recursos da
6eb 7$8$ 4e &oc' quiser programar para esse tipo de pessoa, ent-o mel,or colocar
todos os mecanismos din9micos no lado ser&idor :em arqui&os 54P, A4P#, PP etc;$
1o DOM uma p(gina pode ser di&idida em di&ersos objetos, entre eles<
window< representa a janela do bro3ser$ %tili+ando a sua propriedade
=document= temos acesso ao documento que est( sendo renderi+ado$
document< representa a estrutura do documento$ %tili+ando os mtodos
=get.lement$$$= podemos ter acesso a di&ersos elementos da p(gina$
element< representa cada elemento dentro do documento ou dentro de outro
elemento na p(gina$ Atra&s de sua propriedade inner!M" podemos ter acesso
ou modificar seu contedo$
>amos &er um e/emplo de uso do DOM para obter o ?I? a ser &alidado em um campo
de formul(rio$ Abra o e/emplo =e/emplos@dom@&alida?I?form$,tml=<
<html>
<head>
<title>*** Verifica CIC utilizando form ***</title>
<script language="javascript">
function validacic(numero !
// retiramos os dvs originais
var copia = numero"su#str($%&'
var limite = copia"length'
var produtorio = $'
var dv = $'

for(i( = )' i( > *)' i(** !
produtorio = $'
A @ AB
dv = $'
for(i+ = copia"length * )' i+ > *)' i+** !
peso = )) * (i+ , i('
produtorio ,= (copia"char-t(i+ * peso'
peso,,'
.
dv = produtorio / ))'
if(dv < 0 !
dv = $'
.
else !
dv = )) * dv'
.
copia ,= dv'
.
// teste
if(copia == numero !
alert("dv o12 " , copia'
.
else !
alert("dv inv3lido2 " , copia'
.
.
function validar( !
validacic(document.forms[0].cic.value);
.
</script>
</head>
<#od+>
<form>
<#r>4igite o CIC (nnnnnnnnndd2
<input t+pe="te(t" name="cic">
<#r><input t+pe="#utton" value="verificar"
onclic1="validar()'">
</form>
</#od+>
Entendendo o conceito de objetos do DOM
1este e/emplo, o ato de clicar no bot-o in&ocar( a fun-o =&alidar=$ .sta fun-o in&oca
a fun-o =&alidacic= original passando o &alor do campo =cic= do formul(rio<
document.forms[0].cic.value
.le pega o primeiro elemento da propriedade =forms=, que representa !ODO4 os
formul(rios da p(gina, depois pega o elemento c,amado =cic= dentro deste form e,
finalmente, pega a propriedade =&alue= do elemento$ Isto ir( se transformar em um
string e ser passado para a fun-o =&alidacic=$
7 @ AB
!odos os objetos do DOM possuem propriedades e mtodos$ Ambos s-o acessados
colocandoCse o nome do objeto, um ponto e o nome da propriedade ou mtodo$
Algumas propriedades s-o objetos por si s2, logo, tambm possuem propriedades$
Outras propriedades s-o ArraDs$ "ogo, analisando a propriedade =&alue=, do elemento
=cic= :um objeto;, do primeiro formul(rio :uma cole-o ou arraD de formul(rios;, do
documento<
document. (o objeto que representa o documento atual)
forms (a propriedade do documento que o array de formulrios)
[0]. (o objeto locali!ado na primeira posi"#o do array de formulrios)
cic. (um objeto que uma propriedade do formulrio$ um elemento de
te%to)
value (a propriedade que contm o valor & strin' & do elemento)
!odo formul(rio que possui um nome :propriedade =name=; pode ser acessado atra&s
dele$ Podemos alterar o e/emplo anterior para<
function validar( !
validacic(document.dados.cic.value'
.
</script>
</head>
<#od+>
<form name="dados">
<input t+pe="te(t" name="cic">
onclic1="validar('">
</form>
Dessa maneira estamos identificando o formul(rio como uma propriedade do
documento$ Euando damos um nome a um elemento :form, elemento etc; estamos
tornandoCo uma propriedade do documento$ PoderFamos tambm fa+er o contr(rio,
acessar tudo utili+ando coleGes<
function validar( !
validacic(document"forms5$6"elements5$6"value'
.
1este caso estamos pegando o primeiro objeto do arraD :ou cole-o; de formul(rios do
documento e o primeiro campo :elemento; da cole-o de elementos desse formul(rio$
PoderFamos tambm acessar tudo a partir de propriedades do pr2prio documento<
B @ AB
function validar( !
validacic(document.'et(lement)y*d("cic").value'
.
</script>
</head>
<#od+>
<form name="dados">
<input t+pe="te(t" name="cic" id="cic">
onclic1="validar('">
</form>
Acrescentamos o atributo =id= ao elemento =cic= no formul(rio e utili+amos o mtodo
=get.lementBDId=, do objeto =document= para obter o elemento cujo id =cic= e pegar o
seu &alor :=&alue=;$ 1este caso nem queremos saber em qual formul(rio ele est($
Validando formulrios
A primeira coisa que aprendemos a fa+er com o DOM &alidar campos de formul(rio
antes de submeter ao ser&idor$ Isto importante por que alerta sobre erros antes dos
dados fa+erem a &iagem de ida e &olta at o ser&idor$
Podemos fa+er isto de maneira simples, utili+ando apenas o que con,ecemos at agora e
um no&o e&ento< =onsubmit=$
!odo formul(rio gera um e&ento =onsubmit= quando &oc' aciona o elemento =submit=<
<input t+pe="su#mit" value="enviar">
H um tipo especial de bot-o que ser&e para gerar uma requisi-o ,ttp para o ser&idor$
.sta requisi-o ser( en&iada I p(gina din9mica cujo nome est( no atributo =action=<
<form name="f)" action="teste"jsp" method="789">
4e &oc' acionar o bot-o do tipo =submit=, cada campo do formul(rio ser( en&iado I
p(gina =teste$jsp= como um elemento de querDstring, j( que o mtodo de en&io deste
formul(rio =J.!=$
4e &oc' n-o con,ece bem ,ttp e o processo de en&io de formul(rios, recomendo os
meus li&ros< =!?P@IP e Intranets= e =4ites Din9micos C 1o&as tecnologias=, ambos
editados pela Brasport$
>amos mostrar um pequeno e/emplo do que acontece quando en&iamos um formul(rio$
Imagine o seguinte e/emplo :dentro de =e/emplos@dom@formA$,tml=;<
K @ AB
<html>
<head>
<title>*** :ormul3rio simples ***</title>
</head>
<#od+>
<#r>;ome2
<input t+pe="te(t" name="nome">
<#r><enha2
<input t+pe="pass=ord" name="senha">
<#r>
</form>
</#od+>
!emos aqui um formul(rio simples com tr's elementos, sendo que dois deles s-o
campos que podemos digitar informaGes$ .ste formul(rio en&ia dados para a p(gina
=teste$jsp= utili+ando uma requisi-o ,ttp do tipo =J.!=$ 4e preenc,ermos os campos
com =maria= e =A7BK=, o seguinte comando ,ttp ser( en&iado I p(gina =teste$jsp= no
ser&idor<
789 /teste"jsp>nome=maria?senha=)0@A http/)")
A p(gina =teste$jsp= &ai processar os dados e retornar algum tipo de resposta :se quiser
saber mais sobre 54P, sugiro o meu li&ro =Juia do 5a&a .nterprise .dition L$8=, editado
pela Brasport$
Imagine o que aconteceria se o usu(rio esquecesseCse de preenc,er um :ou ambos; dos
campos$ O comando seria en&iado ao ser&idor, processado e uma resposta com erro
seria de&ol&ida$ 42 que isso tomaria muito tempo e gastaria recursos do ser&idor sem
necessidade$ Por isto &alidamos os campos na pr2pria m(quina do cliente, utili+ando
5a&ascript e DOM, antes de en&i(Clos ao ser&idor$
Para isto utili+aremos o e&ento =onsubmit= do elemento =form=$ .ste e&ento acontece
quando um elemento do tipo =submit= foi clicado em uma p(gina$ A caracterFstica
especial deste e&ento que ele permite cancelar o en&io do formul(rio, ou seja,
podemos utili+(Clo para &alidar os dados digitados e cancelar o en&io, em caso de erro$
O e&ento =onsubmit= permite a e/ecu-o de comandos 5a&ascript e de&e retornar um
resultado bin(rio true ou false$ 4e retornar false, o en&io do formul(rio ser( cancelado<
<form name="f)" action="teste"jsp" method="get"
onsu#mit="return false">
4e desejarmos &alidar os dados temos que e/ecutar alguma fun-o 5a&ascript que
retorne true ou false<
<form name="f)" action="teste"jsp" method="789"
L @ AB
onsu#mit="return verificar(this">
1este caso estamos retornando o resultado da fun-o =&erificar=, para a qual estamos
passando this como argumento$ Mas o que =t,is=M
This - referncia ao objeto atual
!,is significa =este= ou o objeto atual onde o conte/to se situa$ 1o caso do formul(rio
=t,is= uma refer'ncia a ele mesmo, logo, estamos passando um elemento =form=, com
todos os seus campos, para a fun-o$ >eja o e/emplo completo
:e/emplos@dom@form&alidado$,tml;<
<html>
<head>
<title>*** :ormul3rio com validaBCo ***</title>
<script language="Davascript">
function verificar(f) !
var retorno = true'
if(+f.nome.value !
alert("informe o nome"'
f.nome.focus();
retorno = false'
.
if(Ef"senha"value !
alert("informe a senha"'
f"senha"focus('
retorno = false'
.
return retorno;
.
</script>
</head>
<#od+>
onsu#mit="return verificar(t,is)">
<#r>;ome2
<input t+pe="te(t" name="nome">
<#r><enha2
<input t+pe="pass=ord" name="senha">
<#r>
</form>
</#od+>
A fun-o =&erificar= recebe um argumento, que referenciado pela &ari(&el local =f=$
"embreCse que argumentos do tipo OB5.!O s-o passados por refer'ncia, logo a fun-o
pode alterar suas propriedades$ 4e o argumento um objeto )0ONM*, ent-o a fun-o
tem acesso a todos os seus elementos atra&s da &ari(&el =f=, daF ela poder testar se o
campo =nome= foi preenc,ido<
if(+f.nome.value !
O @ AB
%ma condi-o resulta em false se o &alor for P.NO, null, == :string nulo; ou 1a1 :not a
number;, logo, se a propriedade =&alue= do campo n-o ti&er sido digitada ele ser( um
string nulo$ 4e negarmos o &alor saberemos se o campo n-o foi preenc,ido$ PoderFamos
tambm testar desta forma<
if(f.nome.value += "" !
%tili+amos tambm o mtodo =focus:;= do objeto DOM =element=, que mo&e o cursor
para o campo$ Assim, quando comandamos<
f.nome.focus();
.stamos colocando o cursor neste campo :=nome=;, do formul(rio referenciado pela
&ari(&el local =f=$
O objeto Element
O objeto =element= um dos que mais utili+amos no DOM$ .le ser&e para
modificarmos dinamicamente o contedo de elementos em uma p(gina !M"$ .le
possui &(rios mtodos e propriedades que podemos acessar$ ?omo a refer'ncia muito
grande, eu recomendo uma consulta ao site do Mo+ila<
,ttp<@@de&eloper$mo+illa$org@en@docs@DOM<element
As principais propriedades que utili+amos de um elemento s-o<
Propriedade %tilidade
attributes "ista de atributos de um elemento
c,ild1odes "ista de n2s :elementosCfil,os; deste elemento
clienteig,t Altura interior de um elemento
client6idt, "argura interior de um elemento
inner!M" todo o !M" interno de um elemento
node!Dpe !ipo de n2 :A Q elemento DOM;
stDle .stilo :?44; do elemento$ !emos &(rios subC
estulos< font6eig,t, bacRgroundcolor etc
Abra o e/emplo =e/emplos@dom@elementsA$,tml=$ .le altera !ODO4 os elementos de
um formul(rio e cria no&o c2digo dentro de uma )DI>*<
<html>
<head>
<title>*** Frincando com elementos ***</title>
S @ AB
function mudar(f !
for(i(=$' i( < f.c,ild-odes.len't,' i(,, !
if(f"child;odes5i(6"node.ype == ) !
f"child;odes5i(6"style"bac/'round0olor = "+ello="'
f"child;odes5i(6"style"font1ei',t = "#older"'
.
.
.
function mudardiv( !
var minhadiv = document.'et(lement)y*d("aqui");
minhadiv"inner2.34="<#r>Godemos alterar" ,
"<li>8stilo</li>" ,
"<li>GosiBCo</li>" ,
"<li>ConteHdo</li></ul>"'
.
</script>
</head>
<#od+>
<#r>;ome2
<input t+pe="te(t" name="nome"
value="seu nome" >
<#r><enha2
<input t+pe="pass=ord" name="senha"
value="sua senha" >
<#r>
</form>
<input t+pe="#utton" value="mudar cor*de*fundo e peso da letra"
onclic/="mudar(document.f5);"6
<input t+pe="#utton" value="criar elementos"
onclic/="mudardiv();">
<div id="aIui">
<p>Greste atenBCo aIui ao apertar o #otCo "criar elementos""
</div>
</#od+>
.ste c2digo simples muda o estilo de todos os elementos do formul(rio passado no
e&ento =onclicR= de um bot-o$ O outro e/emplo n-o passa nada como argumento,
utili+ando o objeto DOM =document= para obter o elemento )DI>* que desejamos
alterar$ >eja na figura o resultado ap2s clicar no bot-o<
T @ AB
./istem &(rios mtodos associados ao objeto =element= e j( &imos um deles :=focus:;=;,
assim como &(rios tipos de e&entos que podemos interceptar, como<
onfocus< quando o elemento est( no foco do cursor
onblur< quando o elemento sai do foco do cursor
onclicR< quando o cursor clicado sobre o elemento
onmousero&er< quando o cursor do mouse passa por cima do elemento
onmouseout< quando o cursor do mouse sai do elemento
>eja um e/emplo interessante em =e/emplos@dom@elements7$,tml=<
<html>
<head>
<title>*** :ormul3rio com eventos de mouse ***</title>
function verificar(f !
var retorno = true'
if(Ef"nome"value !
alert("informe o nome"'
f"nome"focus('
U @ AB
retorno = false'
.
if(Ef"senha"value !
alert("informe a senha"'
f"senha"focus('
retorno = false'
.
return retorno'
.
</script>
</head>
<#od+>
onsu#mit="return verificar(this">
<#r>;ome2
<input t+pe="te(t" name="nome"
onmouseover=
"7indo7.status=8informe o seu nome de usurio para o sistema8;"
onmouseout="7indo7.status=88;"6
<#r><enha2
<input t+pe="pass=ord" name="senha"
onmouseover="7indo7.status=8informe sua sen,a para o sistema8;"
onmouseout="7indo7.status=88;"6
<#r>
</form>
</#od+>
.sse e/emplo demonstra tambm o uso de outro objeto DOM< =3indo3=$
O objeto document
.ste objeto representa um documento !M" ou #M" que pode estar renderi+ado em
uma janela :objeto =3indo3=;$
Atra&s dele podemos acessar todos os subCelementos, modificandoCos I &ontade$
./istem &(rias propriedades de um documento, entre elas<
Propriedade Descri-o
content!Dpe !ipo de contedo MIM. do documento
cooRie "ista de cooRies separados por pontoCeC&Frgula
forms ?ole-o de formul(rios do documento
linRs ?ole-o de linRs do documento
referrer A %NI da p(gina que in&ocou este documento
Os mtodos mais importantes s-o<
Mtodo Descri-o
create.lement ?ria um no&o elemento no documento
A8 @ AB
get.lementBDId Obtm um elemento utili+ando o atributo =id=
get.lementsBD1ame Obtm uma cole-o de elementos que possuam o mesmo
&alor no atributo =name=
get.lementsBD!ag1ame Obtm uma cole-o de elementos do mesmo tag
3rite .scre&e em um documento
Abra o e/emplo =e/emplos@dom@testedocumentA$,tml= para &er um e/emplo de
na&ega-o utili+ando o objeto =document=<
<html>
<head>
<title>*** Gropriedades de um documento ***</title>
function verificar(( !
saida = %.'et(lement)y*d("resultado");
saida"innerJ9KL = "<#r>Lin1s do documento<ul>"'
for(i(=$' i(<%.lin/s.len't,' i(,, !
saida"innerJ9KL ,= "<ul>" ,
%.lin/s[i%].,ref'
.
saida ,= "</ul>"'

.
</script>
</head>
<#od+>
<#r>Lin1s Hteis</#r>
<ul>
<li><a href="http2//==="google"com">7oogle</a></li>
<li><a href="http2//developer"mozilla"org">4eveloper Kozilla</a></li>
<li><a href="http2//==="microsoft"com">Kicrosoft</a></li>
<#r><a href="javascript9verificar(document)'">5Verificar este
documento6</a>
<div id="resultado">
</div>
</#od+>
>eja que passamos uma refer'ncia ao documento atual na c,amada da fun-o
=&erificar=$ Outra no&idade o uso do protocolo =ja&ascript= no linR, ao in&s de utili+ar
um bot-o$
O objeto window
O ltimo objeto DOM que &eremos a pr2pria 5anela onde o documento est( sendo
apresentado$ .la pode ser a janela principal do bro3ser, uma janela popCup aberta ou at
mesmo uma frame$
>amos comear com o b(sico, que uma janela nica com um documento dentro$
AA @ AB
!emos &(rias propriedades que podemos acessar a partir do objeto =3indo3=$ .ntre
elas<
Propriedade Descri-o
document O documento que est( sendo apresentado na 5anela
innereig,t Altura da parte interior da 5anela
inner6idt, "argura da parte interior da 5anela
location %N" do documento atuamente sendo apresentado
locationbar Permite acessar a barra de endereo da janela e torn(Cla
&isF&el ou n-o :propriedade &isible;
menubar Idem para a barra de menus
opener %ma refer'ncia para a 5anela que abriu a janela atual
screen %ma refer'ncia para o objeto =screen= associado a esta
5anela$ Permite saber caracterFsticas fFsicas do monitor
!emos &(rios mtodos
Mtodo Descri-o
alert Mostra uma janela popCup sobre a janela do bro3ser
close 0ec,a a janela atual
confirm Mostra uma janela popCup e pede confirma-o do usu(rio,
que pode ser testada com um comando =if=$ ?aso o usu(rio
confirme, a fun-o retornar( true$
open Abre uma no&a janela
>amos mostrar um e/emplo que mostra uma janela PopCup$ Abra o e/emplo
=e/emplos@dom@3indo3A$,tml=<
<html>
<head>
<title>*** 4emonstraBCo do o#jeto =indo= ***</title>
<script language="javascript">
function a#rejan(f !
var url = f"MNL"value'
if(url"inde(Of("http2//" <$ !
url = "http2//" , url'
.
a = =indo="open(url%";ovaDan"%
"menu#ar=no%" ,
"location=no%" ,
"resiza#le=no%" ,
"scroll#ars=+es%" ,
"status=no%" ,
"height=@$$%" ,
"=idth=P$$"'

.
A7 @ AB
</script>
</head>
<#od+>
<form name="f)" onsu#mit="return a#rejan(this'">
<#r>MNL2
<input t+pe="te(t" name="MNL">
<#r>
<input t+pe="su#mit" value="a#rir">
</form>
</#od+>
1este e/emplo utili+amos o mtodo =open= do objeto DOM =3indo3= para abrir uma
no&a 5anela de bro3ser$ H um recurso muito utili+ado em 3ebsites ,oje em dia$ O
mtodo =open= possui os argumentos<
%N"
1ome da 5anela
Propriedades da 5anela$
1o argumento propriedades da janela podemos informar se ela de&e ter menu, barra de
endereos, barras de scroll, largura, altura etc$
AB @ AB

Document Object Model

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Document Object Model

Enviado por

Direitos autorais:

Formatos disponíveis

Professor Cleuton Sampaio de Melo Jr - Javascript

Document Object Model

Você também pode gostar