Cap'tulo 5. DOM: 5.1. Çrbol de Nodos

Introduccin a JavaScript
Captulo 5. DOM
Captulo 5. DOM
- $:) ' Document Object Model * DOM . 0) '. $))*1$*) . ,0 (6. #
$)!'0$* ) ' .--*''* '. +6"$). 2 $)6($. 4 '. +'$$*) . 2 (6.
*(+' %.?
+ -($/ '*. +-*"-(*- . 2 - 4 ()$+0'- '. +6"$). *(* .$
!0 -) *0( )/*. ? # #*< . $. 9: *-$"$)'( )/ +- ()$+0'-
!*-(. )$'''*.*0( )/*. ?
+ .- .0. *-8" ) .< . # *)1 -/$* ) 0) 0/$'$ $.+*)$' +- '
(4*-8 ' )"0% . +-*"-($:) D1< < 1-$+/E 4 04. ;)$. $! - )$.
. )0 )/-) )'!*-( $(+' ( )/-'*?
5.1. rbol de nodos

) '. /- . #$/0' . ) ' +-*"-($:) +'$$*) . 2 *) 1-$+/
*).$./ ) ' ()$+0'$:) '. +6"$). 2 ? ./ !*-(< . #$/0' */ ) - '
1'*- '( )* +*- '"0)*. ' ( )/*. D+*- % (+'* '*. ' ( )/*. 0) !*-(0'-$*E<
- - 0) ' ( )/* D+6--!*.< <div>< /?E !*-( $)6($ 4 9$-'* ' +6"$)<
+'$-0))$($:)0) ' ( )/*D,0 +- 5C .+- 5<,0 . .+' < /?E?
*. ./. /- . #$/0' . .*) (04 . )$''. - '$5- "-$. ? $) (-"*<
+- +* - 0/$'$5- '. 0/$'$ . < . ) .-$* "transformar" ' +6"$) *-$"$)'?
) +6"$) )*-(' )* . (6. ,0 0) .0 .$:) -/ - .< +*- '* ,0 . 0)
!*-(/* (04 $!8$' ()$+0'-? *- ''*< '*. )1 "*- . 2 /-).!*-()
0/*(6/$( )/ /*.'.+6"$).2 )0) ./-0/0-(6. !$$ )/ ()$+0'-?
./ /-).!*-($:) ' - '$5) /**. '*. )1 "*- . !*-( 0/*(6/$ 4 )*.
+ -($/ 0/$'$5- '. # --($ )/. !*-( (04 . )$''? ' (*/$1* +*- ' ,0 .
(0 ./- ' !0)$*)($ )/*
./ /-).!*-($:) $)/ -) . ,0 *)$$*) '
*(+*-/($ )/* 4+*-/)/*<'!*-( )',0 . ()$+0')'.+6"$).?
/-).!*-( /**. '*. *0( )/*. ) 0) *)%0)/* ' ( )/*. ''(*.
nodos< ,0 ./6) $)/ -*) /*. 4 ,0 - +- . )/) '*. *)/ )$*. '. +6"$). 2 4
'. - '$*) . )/- ''*.? *- .0 .+ /*< ' 0)$:) /**. '*. )**. . ''( "rbol de
nodos"?
.$"0$ )/ +6"$) . )$''>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pgina sencilla</title>
</head>
www.librosweb.es
53
Captulo 5. DOM
<body>
Esta pgina es muy sencilla
</body>
</html>
/-).!*-( ) '.$"0$ )/ 6-*' )**.>
Figura 5.1. rbol de nodos generado automticamente por DOM a partir del cdigo XHTML
de la pgina
) ' .,0 ( )/ -$*-< - /6)"0'* - +- . )/ 0) )** 4 '. !' #. $)$)
'. - '$*) . )/- )**.? )/-* )**< . # $)'0$* .0 /$+* D,0 . 1 -6 (6.
')/ E4.0*)/ )$*?
-85 ' 6-*' )**. 0',0$ - +6"$) .$ (+/$+* .+ $' )*($)* "Documento"?
. ' ($.(> 0) )**
+-/$- . )** -85< /$,0 / . /-).!*-( ) 0) )** /$+*

"Elemento"? *)1 -.$:) /$,0 /. ) )**. . - '$5 !*-( % -6-,0$? ./
!*-(< ' )** -85 .*'( )/ +0 ) -$1- '*. )**. HEAD 4 BODY? +-/$- ./
-$1$:) $)$$'< /$,0 / . /-).!*-( ) 0) )** ,0 -$1 ' )**
*-- .+*)$ )/ .0 "etiqueta padre"?
/-).!*-($:) '. /$,0 /. #$/0' . " ) - *. )**.> ' +-$( -* . '
)** /$+* "Elemento" D*-- .+*)$ )/ ' +-*+$ /$,0 / E 4 ' . "0)* .
0))** /$+* "Texto" ,0 *)/$ ) '/ 3/* ) --*+*- . /$,0 / ?
.8<'.$"0$ )/ /$,0 / >
<title>Pgina sencilla</title>
) -'*..$"0$ )/ .*.)**.>
www.librosweb.es
54
Captulo 5. DOM
Figura 5.2. Nodos generados automticamente por DOM para una etiqueta XHTML sencilla
'($.(!*-(<'.$"0$ )/ /$,0 / >
Esta pgina es muy sencilla
) -'*..$"0$ )/ .)**.>
** /$+* "Elemento" *-- .+*)$ )/ ' /$,0 / ?
** /$+* "TextoG*) '*)/ )$*/ 3/0' ' /$,0 / ?
*(* '*)/ )$* $)'04 ).0$)/ -$*-*/- /$,0 / <' /$,0 /
$)/ -$*-. /-).!*-( )0))** /$+* "Elemento" ,0 - +- . )/' /$,0 /
 4,0 -$1 ')**)/ -$*-?
'*)/ )$* ' /$,0 / " ) -.01 5*/-*)** /$+* "Texto" ,0
-$1 ')**" ) -*+*- ?
Figura 5.3. Nodos generados automticamente por DOM para una etiqueta XHTML con otras
etiquetas XHTML en su interior
/-).!*-($:) 0/*(6/$ ' +6"$) ) 0) 6-*' )**. .$ (+- .$"0 '.
($.(.- "'.>
. /$,0 /. . /-).!*-() )*.)**.> '+-$( -* .'+-*+$
/$,0 /4 '. "0)*)** .#$%* '+-$( -*4*).$./ ) '*)/ )$*/ 3/0'
' /$,0 /?
$0) /$,0 / . )0 )/- )/-* */-<. .$"0 '($.(*
+-* $($ )/*)/ -$*-<+ -*'*.)**." ) -*.. -6))**.#$%* .0 /$,0 /
+- ?
www.librosweb.es
55
Captulo 5. DOM
*(* . +0 .0+*) -< '. +6"$). #$/0' . +-*0 ) 6-*' . *) ($' .
)**.? 0) .8< ' +-* .* /-).!*-($:) . -6+$* 4 0/*(6/$*< .$ )* '.
!0)$*) . +-*+*-$*). +*- D,0 . 1 -6) (6. ')/ E '. ;)$. ,0
+ -($/ ) -0',0$ -)** '+6"$) !*-(. )$'' $)( $/?
5.2. Tipos de nodos

.+ $!$$:) *(+' / !$) JK /$+*. )**.< 0),0 '. +6"$).
#$/0' .. +0 )()$+0'-() %)*.*'( )/ 0/-**$)*/$+*. )**.>
Document<)**-85 ',0 -$1)/**.'*. (6.)**. '6-*'?
Element<- +- . )/0) '. /$,0 /. ? /-/ ';)$*)**,0
+0 *)/ ) -/-$0/*.4 ';)$* ',0 +0 ) -$1-*/-*.)**.?
Attr<. !$) 0))** ./ /$+*+-- +- . )/-0)* '*./-$0/*.
'. /$,0 /. < . $-<0)*+*-+- atributo=valor?
Text<)**,0 *)/$ ) '/ 3/* ) --*+*-0) /$,0 / ?
Comment<- +- . )/'*.*( )/-$*.$)'0$*. )'+6"$) ?
*. */-*. /$+*. )**. 3$./ )/ . ,0 )* . 1) *).$ -- .*) DocumentType<
CDataSection< DocumentFragment< Entity< EntityReference< ProcessingInstruction 4
Notation?
5.3. Acceso directo a los nodos

) 1 5 *)./-0$* 0/*(6/$( )/ ' 6-*' *(+' /* )**. < 4 . +*.$'
0/$'$5- '. !0)$*) . +- - !*-( $- / 0',0$ - )** ' 6-*'?
*(* - 0) )** ' 6-*' . ,0$1' )/ - "un trozo" ' +6"$)< 0)
1 5 *)./-0$* ' 6-*'< 4 . +*.$' ()$+0'- !*-( . )$'' ' +6"$)> - '
1'*- 0) ' ( )/*< ./' - ' 1'*- 0) ' ( )/*< (*1 - 0) ' ( )/* '
+6"$)<- -49$-)0 1*. ' ( )/*.< /?
+-*+*-$*) *. (7/**. '/ -)/$1*. +- - 0) )** .+ 8!$*> .*
/-17. .0.)**.+- 4 .*$- /*?
. !0)$*) . ,0 +-*+*-$*) +- - 0) )** /-17. .0. )**. +*).$./ ) ) - ' )** -85 ' +6"$) 4 .+07. .0. )**. #$%*. 4 '*. )**.
#$%*. .*. #$%*. 4 .8 .0 .$1( )/ #./ ' ;'/$(* )** ' -( / -($) +*- '
)** 0.*? $) (-"*< 0)* . ,0$ - - 0) )** .+ 8!$*< . (0#*
(6. -6+$* - $- /( )/ . )** 4 )* '' "- #./ 7' . )$ )* /-17.
/**..0.)**.+- ?
*- . (*/$1*< )* . 1) +- . )/- '. !0)$*) . ) .-$. +- ' .* % -6-,0$*
)**. 4 . (0 ./-) .*'( )/ '. ,0 + -($/ ) - !*-( $- / '*.
)**.?
www.librosweb.es
56
Captulo 5. DOM
*- ;'/$(*< . $(+*-/)/ - *-- ,0 ' .* '*. )**.< .0 (*$!$$:) 4 .0

'$($)$:) .*'( )/
. +*.$' 0)* ' 6-*' # .$* *)./-0$*
*(+' /( )/ < . $-< .+07. ,0 ' +6"$) . -"0 +*- *(+' /*? 6.
')/ . 1 -6 :(* . "0-- ,0 0) :$"* 1-$+/ .*'( )/ . % 0/ 0)* '
)1 "*-#-"* )/ -'+6"$) ?
5.3.1. getElementsByTagName()
*(* .0
*) /*. '. !0)$*) . ,0
+-*+*-$*)
< ' !0)$:)
getElementsByTagName() /$ ) 0))*(- (04'-"*<+ -*,0 '*# 0/* 3+'$/$1*?
!0)$:) getElementsByTagName(nombreEtiqueta) */$ ) /**. '*. ' ( )/*. '

+6"$) 04 /$,0 /. $"0',0 '+-6( /-*,0 . ' +.'!0)$:)?
'.$"0$ )/ % (+'*(0 ./-:(**/ ) -/**.'*.+6--!*. 0)+6"$) >
var parrafos = document.getElementsByTagName("p");
' 1'*- ,0 . $)$ ')/ ' )*(- ' !0)$:) D ) ./ .*< documentE . '
)** +-/$- ' 0' . - '$5 ' ;.,0 '*. ' ( )/*.? ) ./ .*< *(* .
,0$ - ) */ ) - /**. '*. +6--!*. ' +6"$)< . 0/$'$5 ' 1'*- document *(* +0)/*
+-/$ ';.,0 ?
' 1'*- ,0 10 '1 ' !0)$:)
*)$$:) ,0 .0 /$,0 / *$)$
. 0) --4 )**. < )* 0)
)*-(' .? *- '* /)/*< . +-*
)'..$"0$ )/ .. $*) .?
. 0) --4 *) /**. '*. )**. ,0 0(+' ) '

*) ' +-6( /-* +-*+*-$*)*? ' 1'*- 10 '/*
--4 ). / 3/* * 0) --4 *% /*.
.- 1'*- ' --4 ' !*-( ,0 . (0 ./-
./ (**<. +0 */ ) - '+-$( -+6--!* '+6"$) '.$"0$ )/ () ->

var primerParrafo = parrafos[0];
' ($.( !*-(< . +*-8) - *-- - /**. '*. +6--!*. ' +6"$) *) ' .$"0$ )/
:$"*>
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}
!0)$:) getElementsByTagName() . +0 +'$- !*-( - 0-.$1 .*-

0)* '*. )**. 10 '/*. +*- ' !0)$:)? ) ' .$"0$ )/ % (+'*< . */$ ) ) /**. '*.
)' . '+-$( -+6--!* '+6"$)>
var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");
www.librosweb.es
57
Captulo 5. DOM
5.3.2. getElementsByName()
!0)$:) getElementsByName() . .$($'- ' )/ -$*-< + -* ) ./ .* . 0.) '*.
' ( )/*. 04* /-$0/* name . $"0' ' +-6( /-* +-*+*-$*)*? ) ' .$"0$ )/
% (+'*<. */$ ) $- /( )/ ';)$*+6--!**) ')*(- $)$*>
var parrafoEspecial = document.getElementsByName("especial");
...
...
...
*-('( )/ ' /-$0/* name . ;)$* +- '*. ' ( )/*. ,0 '* !$) )< +*- '*
,0 . 0) (7/** (04 +-6/$* +- - $- /( )/ ' )** . *? ) ' .*
'*. ' ( )/*. radiobutton< ' /-$0/* name . *(;) /**. '*. radiobutton
,0 ./6)- '$*)*.<+*-'*,0 '!0)$:) 10 '1 0)*' $:) ' ( )/*.?
)/ -) / 3+'*- - O?I )* $(+' ( )/ !*-( *-- / ./ !0)$:)< 4 ,0 .:'* ' /$ )
) 0 )/ +- '*. ' ( )/*. /$+* <input> 4 <img>? (6.< /($7) /$ ) )
*).$ -$:)'*. ' ( )/*.04*/-$0/* id . $"0''+-6( /-* '!0)$:)?
5.3.3. getElementById()
!0)$:) getElementById() . ' (6. 0/$'$5 0)* . .--*'') +'$$*) .
2 $)6($.? /-/ ' !0)$:) +- ! -$ +- - $- /( )/ 0) )** 4
+* -' -*(*$!$-.0.+-*+$ .?
!0)$:) getElementById() 10 '1 ' ' ( )/* 04* /-$0/* id *$)$
*) ' +-6( /-* $)$* ) ' !0)$:)? *(* ' /-$0/* id . - ;)$* +-
' ( )/* 0)($.(+6"$)<'!0)$:) 10 '1 ;)$( )/ ')** . *?
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
!0)$:) getElementById() . /) $(+*-/)/ 4 /) 0/$'$5 ) /*. '. +'$$*) .

2 <,0 .$/**.'*. % (+'*.4 % -$$*.,0 .$"0 )'0/$'$5)*)./)/ ( )/ ?
)/ -) / 3+'*- - O?I /($7) $)/ -+- / $)*-- /( )/ ./ !0)$:)< 4 ,0 10 '1
/($7) ,0 ''*. ' ( )/*. 04* /-$0/* name *$)$ *) ' +-6( /-*
+-*+*-$*)*'!0)$:)?
5.4. Creacin y eliminacin de nodos

- '*. )**. 4 .0. +-*+$ . D,0 . 1 -6 (6. ')/ E . .:'* 0) +-/
'. ()$+0'$*) . #$/0' . ) '. +6"$).? . */-. *+ -$*) . #$/0' . .*) '.
- - 4 '$($)- )**. ' 6-*' < . $-< - - 4 '$($)- "trozos" ' +6"$)
2 ?
www.librosweb.es
58
Captulo 5. DOM
5.4.1. Creacin de elementos XHTML simples

*(* . # 1$./*< 0) ' ( )/* . )$''*< *(* +*- % (+'* 0) +6--!*< " ) -
*. )**.> ' +-$( - )** . /$+* Element 4 - +- . )/ ' /$,0 / 4 ' . "0)*
)** . /$+* Text 4- +- . )/ '*)/ )$*/ 3/0' ' /$,0 / ?
*- ./ (*/$1*< - - 4 9$- ' +6"$) 0) )0 1* ' ( )/* . )$''* *)./
0/-*+.*.$! - )/ .>
J?
K?
L?
M?
- $:) 0))** /$+* Element ,0 - +- . )/ ' ' ( )/*?

- $:) 0))** /$+* Text ,0 - +- . )/ '*)/ )$* ' ' ( )/*?
9$- ')** Text *(*)**#$%* ')** Element?
9$- ')** Element '+6"$)< )!*-( )**#$%* ')**
*-- .+*)$ )/ ''0"- ) ',0 . ,0$ - $). -/- ' ' ( )/*?
./ (**< .$ . ,0$ - 9$- 0) +6--!* .$(+' ' !$)' 0) +6"$) < .
) .-$*$)'0$- '.$"0$ )/ :$"*1-$+/>
// Crear nodo de tipo Element
var parrafo = document.createElement("p");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Aadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Aadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
' +-* .* - $:) )0 1*. )**. +0 '' "- . - / $*.*< 4 ,0 $(+'$ '
0/$'$5$:) /- .!0)$*) . >
createElement(etiqueta)>- 0))** /$+* Element ,0 - +- . )/'
' ( )/* 04 /$,0 /. +.*(*+-6( /-*?
createTextNode(contenido)>- 0))** /$+* Text ,0 '( ) '
*)/ )$*/ 3/0' '*. ' ( )/*. ?
nodoPadre.appendChild(nodoHijo)>9 0))***(*#$%* */-*)**?
0/$'$5-'( )*.*.1 .*)'*.)**.#$/0' .> )+-$( -'0"-.
9 ')** Text *(*#$%* ')** Element 4*)/$)0$:). 9 ')**
Element *(*#$%* '";))** '+6"$)?
5.4.2. Eliminacin de nodos

!*-/0)( )/ < '$($)- 0) )** ' 6-*' ' +6"$) . (0#* (6. . )$''*
,0 9$-'*?) ./ .*<.*'( )/ .) .-$*0/$'$5-'!0)$:) removeChild()>
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
www.librosweb.es
59
Captulo 5. DOM
...
!0)$:) removeChild() - ,0$ - *(* +-6( /-* ' )** ,0 . 1 '$($)-?

(6.< ./ !0)$:) . - $)1* . ' ' ( )/* +- . )** ,0 .
,0$ - '$($)-? !*-( (6. . "0- 4 -6+$ - ' )** +- 0) ' ( )/*
.( $)/ '+-*+$ nodoHijo.parentNode?
.8< +- '$($)- 0) )** 0) +6"$) . $)1* ' !0)$:) removeChild()
. ' 1'*- parentNode ' )** ,0 . ,0$ - '$($)-? 0)* . '$($) 0) )**<
/($7) . '$($)) 0/*(6/$( )/ /**. '*. )**. #$%*. ,0 / )"< +*- '* ,0 )* .
) .-$**---()0'( )/ )**#$%*?
5.5. Acceso directo a los atributos XHTML

) 1 5 ,0 . # $* 0) )**< ' .$"0$ )/ +.* )/0-' *).$./ ) - 4C*
(*$!$- .0. /-$0/*. 4 +-*+$ .? $)/ < . +*.$' - !*-(
. )$'' /**. '*. /-$0/*. 4 /*. '. +-*+$ . 0',0$ - ' ( )/*
'+6"$)?
*. /-$0/*. '*. ' ( )/*. ' +6"$) . /-).!*-() 0/*(6/$( )/ )
+-*+$ . '*. )**.? - - .0 1'*-< .$(+' ( )/ . $)$ ' )*(- '
/-$0/* /-6. ')*(- ')**?
'.$"0$ )/ % (+'**/$ ) !*-($- /'$- $:)',0 )'5 ' )' >
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
<a id="enlace" href="http://www...com">Enlace</a>
) ' % (+'* )/ -$*-< . */$ ) ' )** ,0 - +- . )/ ' )' ( $)/ '
!0)$:) document.getElementById()? *)/$)0$:)< . */$ ) ' /-$0/* href '
)' ( $)/ enlace.href? - */ ) - +*- % (+'* ' /-$0/* id< . 0/$'$5-8
enlace.id?
. +-*+$ . )* .*) /) !6$' . */ ) - *(* '*. /-$0/*. ? -
*/ ) - ' 1'*- 0',0$ - +-*+$ ' )**< . 0/$'$5- ' /-$0/* style?
'.$"0$ )/ % (+'**/$ ) '1'*- '+-*+$ margin '$(" )>
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
0),0 ' !0)$*)($ )/* . #*(*"7) * )/- $./$)/*. )1 "*- .< '*. - .0'/*. )*
.*) 3/( )/ $"0' .< *(* (0 ./-) '. .$"0$ )/ . $(6" ) . ,0 .*) ' - .0'/*
% 0/- ':$"*)/ -$*- )$./$)/*.)1 "*- .>
www.librosweb.es
60
Captulo 5. DOM
Figura 5.4. Valores que muestra Internet Explorer al acceder a las propiedades CSS a travs
de JavaScript
Figura 5.5. Valores que muestra Firefox al acceder a las propiedades CSS a travs de
JavaScript
$ ' )*(- 0) +-*+$ . *(+0 ./*< . .0 1'*- (*$!$)*
'$" -( )/ .0)*(- >
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight); // muestra "bold"
...
/-).!*-($:) ' )*(- '. +-*+$ . *(+0 ./. *).$./ ) '$($)/**. '*. "0$*) . ( $*. D-E 4 .-$$- ) (4;.0' ' ' /- .$"0$ )/ "0$:)
( $*?*)/$)0$:). (0 ./-)'"0)*. % (+'*.>
font-weight . /-).!*-( ) fontWeight
line-height . /-).!*-( ) lineHeight
border-top-style . /-).!*-( ) borderTopStyle
list-style-image . /-).!*-( ) listStyleImage
' ;)$* /-$0/* ,0 )* /$ ) ' ($.(* )*(- ) 4 ) '. +-*+$ .
. ' /-$0/* class? *(* ' +'- class ./6 - . -1 +*- 1-$+/< )* .
+*.$' 0/$'$5-' +- - ' /-$0/* class ' ' ( )/* ? ) .0 '0"-<
0/$'$5 ')*(- className +- -'/-$0/* class >
var parrafo = document.getElementById("parrafo");
alert(parrafo.class); // muestra "undefined"
alert(parrafo.className); // muestra "normal"
...
www.librosweb.es
61
Captulo 5. DOM
5.6. Ejercicios sobre DOM

Ejercicio 11
A partir de la pgina web proporcionada y utilizando las funciones DOM, mostrar por
pantalla la siguiente informacin:
1.
2.
3.
4.
Nmero de enlaces de la pgina

Direccin a la que enlaza el penltimo enlace
Numero de enlaces que enlazan a http://prueba
Nmero de enlaces del tercer prrafo
Ejercicio 12
Completar el cdigo JavaScript proporcionado para que cuando se pinche sobre el enlace se
muestre completo el contenido de texto. Adems, el enlace debe dejar de mostrarse
despus de pulsarlo por primera vez. La accin de pinchar sobre un enlace forma parte de
los "Eventos" de JavaScript que se ven en el siguiente captulo. En este ejercicio, slo se
debe saber que al pinchar sobre el enlace, se ejecuta la funcin llamada muestra().
Ejercicio 13
Completar el cdigo JavaScript proporcionado para que se aadan nuevos elementos a la
lista cada vez que se pulsa sobre el botn. Utilizar las funciones DOM para crear nuevos
nodos y aadirlos a la lista existente. Al igual que sucede en el ejercicio anterior, la accin de
pinchar sobre un botn forma parte de los "Eventos" de JavaScript que se ven en el siguiente
captulo. En este ejercicio, slo se debe saber que al pinchar sobre el botn, se ejecuta la
funcin llamada anade().
www.librosweb.es
62

Cap'tulo 5. DOM: 5.1. Çrbol de Nodos

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cap'tulo 5. DOM: 5.1. Çrbol de Nodos

Uploaded by

Copyright:

Available Formats

Introduccin a JavaScript

5.1. rbol de nodos

 /-).!*-( ) '.$"0$ )/ 6-*' )**.>

. ' ($.(> 0) )** 

+-/$-  . )** -85<  /$,0 /   . /-).!*-( ) 0) )**  /$+*

5.2. Tipos de nodos

5.3. Acceso directo a los nodos

*- ;'/$(*< . $(+*-/)/ - *-- ,0 '  .*  '*. )**.< .0 (*$!$$:) 4 .0

*) /*. '. !0)$*) . ,0

< ' !0)$:)

getElementsByTagName() /$ ) 0))*(- (04'-"*<+ -*,0 '*# 0/* 3+'$/$1*?

 !0)$:) getElementsByTagName(nombreEtiqueta) */$ ) /**. '*. ' ( )/*.  '

. 0) --4 *) /**. '*. )**. ,0 0(+' ) '

 ./ (**<. +0  */ ) - '+-$( -+6--!* '+6"$) '.$"0$ )/ () ->

 !0)$:) getElementsByTagName() . +0  +'$-  !*-( - 0-.$1 .*- 

 !0)$:) getElementById() . /) $(+*-/)/ 4 /) 0/$'$5 ) /*. '. +'$$*) .

5.4. Creacin y eliminacin de nodos

5.4.1. Creacin de elementos XHTML simples

- $:) 0))** /$+* Element ,0 - +- . )/ ' ' ( )/*?

5.4.2. Eliminacin de nodos

 !0)$:) removeChild() - ,0$ - *(* +-6( /-* ' )** ,0 . 1  '$($)-?

5.5. Acceso directo a los atributos XHTML

5.6. Ejercicios sobre DOM

Nmero de enlaces de la pgina

You might also like

/-).!-( ) '.$"0$ )/ 6-' ).>

. ' ($.(> 0) )

+-/$- . ) -85< /$,0 / . /-).!-( ) 0) )* /$+*

- ;'/$(< . $(+-/)/ - -- ,0 ' .* '. ).< .0 ($!$$:) 4 .0

) /. '. !0)$*) . ,0

< ' !0)$:)

getElementsByTagName() /$ ) 0))(- (04'-"<+ -,0 '# 0/* 3+'$/$1*?

!0)$:) getElementsByTagName(nombreEtiqueta) /$ ) /*. '. ' ( )/. '

. 0) --4 ) /. '. ). ,0 0(+' ) '

./ (<. +0 / ) - '+-$( -+6--! '+6"$) '.$"0$ )/ () ->

!0)$:) getElementsByTagName() . +0 +'$- !-( - 0-.$1 .-

!0)$:) getElementById() . /) $(+-/)/ 4 /) 0/$'$5 ) /. '. +'$$*) .

- $:) 0)) /$+* Element ,0 - +- . )/ ' ' ( )/*?

!0)$:) removeChild() - ,0$ - ( +-6( /-* ' ) ,0 . 1 '$($)-?