Você está na página 1de 10

17/09/13

1
!"#"$%&'() + ,"&)- .
/"0'(12"034 4 56/
Luclana lorLes


56/
uocumenL Cb[ecL Model
Crlado pelo W3C
uma mulu-plaLaforma que represenLa como as
marcaes em P1ML, xP1ML e xML so organlzadas e
lldas pelo navegador
usado na manlpulao de seleLores
Manlpula o layouL de uma pglna web
ermlLe a LoLal lnLegrao enLre !avascrlpL e o
documenLo P1ML no qual ele esL lnLegrado
17/09/13
2
7&#4&- "%-88"3" (-24 56/
90)-03-034 " :&#4&- 56/
A base para Lodos os ns da rvore uCM e a base class
chamado node.
ossul vrlas caLegorlas
Mals relevanLes:
uocumenLos
LlemenLos
1exLo
17/09/13
3
;< 54%1=-0)4
n mals lmporLanLe do uCM
1rs classes dlferenLes:
uocumenL, que e usado por Lodos os documenLos xML
e ouLros que no se[am SvC (que Lambem e um xML,
porem com marcao [ padronlzada)
SvC: Scalable vecLor Craphlcs
Llnguagem xML para descrever de forma veLorlal desenhos e
grcos bldlmenslonals
P1MLuocumenL que culda de documenLos P1ML
SvCuocumenL, responsvel pelos documenLos SvC e
Lambem por ouLros documenLos herdados da classe
uocumenL (por ex.: uocumenL e P1MLuocumenL).
;< 92-=-0)48
LlemenLos so Lodas as Lags que esLo em arqulvos
P1ML ou xML
1odos se Lransformam em elemenLos da rvore uCM.
um elemenLo e um n com uma Lag que pode ser usada
para fazer subclasses especlcas que podem ser
processadas de acordo com as necessldades da 8ender
1ree (LlemenL).
17/09/13
4
;< >-?)4
1exLo: L o LexLo presenLe enLre os elemenLos.
1odo o conLeudo das Lags
<p>lsLo e um LexL node</p>
C n de 1exLo guarda baslcamenLe LexLo puro, que pode
ser renderlzado ou Lrabalhado vla scrlpL.
/"0'(12"034 4 56/
ara manlpular o uCM, voc preclsa baslcamenLe de 3
meLodos:
geLLlemenL8yld
geLLlemenLs8y1agname
geLLlemenLs8yname
LxlsLem ouLros meLodos para a manlpulao do uCM
para Lornar a experlncla do usurlo mals agradvel
17/09/13
3
@-)92-=-0)ABC3
um ld e um aLrlbuLo do hLml para a ldenucao de um
elemenLo
Cada elemenLo em que houver o aLrlbuLo ld deve Ler seu valor
dlferenLe dos demals
geLLlemenL8yld serve para se reservar ou seleclonar o
elemenLo para Lrabalhar com ele:
Conhecer seu conLeudo
SeLar um novo conLeudo
AcrescenLar novas lnformaes ao conLeudo
Adlclonar um elemenLo
Manlpular seu css
Melhor a manelra de se acessar um elemenLo especlco
D84 34 @-)92-=-0)ABC3
!"#$ &'( &)*(*+* +, -./01' 23

<ul>
<li id="Mouse" onclick="adiciona('Mouse')">80.45</li>
<li id="Notebook"
onclick="adiciona('Notebook')">1000.50</li>
<li id="Pen-drive"
onclick="adiciona('Pen-drive')">52.45</li>
</ul>

Total <p id="total">0</p>
17/09/13
6
D84 34 @-)92-=-0)ABC3 E%40)FG
4./01' 23 5,-,5,/&6*+* /' !"#$

function adiciona(item) {
valor = document.getElementById(item).innerHTML;
valor = parseFloat(valor);
total = document.getElementById('total').innerHTML;
total = parseFloat(total);
total = total + valor;
document.getElementById('total').innerHTML =
total;
}

D84 34 @-)92-=-0)8AB)"@;"=-
ulferenLemenLe do geLLlemenL8yld, o geLLlemenLs8y1agname
reserva Lodos os elemenLos de uma deLermlnada Lag

4./01' 23 5,-,5,/&6*+* /' !"#$

function adiciona(item) {
...
removerItem(item);
}

function removerItem(item) {
document.getElementsByTagName('ul')[0].
removeChild(document.getElementById(item));
}
17/09/13
7
D84 34 @-)92-=-0)8AB;"=-
usado em elemenLos que possuam o aLrlbuLo name
Mals comum em formulrlos (lL s reconhece em lmagens e
formulrlos)
normalmenLe o geLLlemenLs8yld e 8y1agname [ servem
para Ludo, asslm cosLuma-se us-los mals que o 8yname
function validar(campo) {
if (document.getElementsByName(campo)[0].value == '')
alert('Preencha ' + campo);
}
<img name=imagemJs" src="javascript.jpg">
<img name="imagemJs" src=elemento.jpg">
<script>
var el1 = document.getElementsByName('imagemJs')[0];
var el2 = document.getElementsByName('imagemJs')[1];
</script>
,&4(&'-3"3-8 56/
Cs aLrlbuLos P1ML de uma Lag so mapeados como proprledades do
elemenLo uCM
no exemplo abalxo, fol manlpulado o aLrlbuLo src de lmg como uma
proprledade do uCM
<script>
function mudaImg(){
var trocaImagem =
document.getElementById('imagemDom');
trocaImagem.src = 'img/imagem2.png';
}
</script>

<img id="imagemDom" src="img/imagem1.png">
<p style="text-align:left"
onClick="mudaImg()">Mudar imagem</p>
17/09/13
8
!"#$%&"
Cs esulos de um ob[eLo so acessados aLraves da proprledade
789:,.
Cada aLrlbuLo CSS e mapeado para uma proprledade
equlvalenLe em 789:,.
CSS: background-color
!S: sLyle.backgroundColor
CSS: color
!S: sLyle. color
CSS: fonL-famlly
!S: sLyle.fonL
CSS: fonL-welghL
!S: sLyle.fonLWelghL
9?-=(24
<style>
div { border:1px solid black; width: 20em ;

text-align:center; background-color:#D5EAFF }
</style>

<script>
function liga(){
document.getElementById('meudiv').
style.backgroundColor = 'red';
}
function desliga(){
document.getElementById('meudiv').
style.backgroundColor = '#D5EAFF';
}
</script>

<div id="meudiv" onMouseOver="liga()"
onMouseOut="desliga()">Passe o mouse</div>
17/09/13
9
'$"$($%$)*)+ )+ !%+-+.#&"
A proprledade CSS +67;:*9 conLrola como um elemenLo e
exlbldo na Lela.
<:'&= - LlemenLo de bloco
6/:6/, - LlemenLo lnllne
)6++,/ - no exlbe
L posslvel explorar essa proprledade em !avascrlpL para
alLernar a vlslbllldade de elemenLos
9?-=(24
<script>
function exibe(){
document.getElementById('bloco').
style.display = 'block';
}
function esconde(){
document.getElementById('bloco').
style.display = 'none';
}
</script>

<p><a href="#" onClick="exibe()">Exibe</a>
<a href="#" onClick="esconde()">Esconde</a>
</p>

<div id="bloco" style="display:none">
Texto do bloco
</div>
17/09/13
10
H40%218I4 34 %40)-J34
("&" " (&4#" 34 KL A'=-8)&-