Acceso a los elementos XHTML DOM

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Acceso a los elementos XHTML DOM"

Lucas Carmona Vargas
hace 10 años
Vistas:

1 Acceso a los elementos XHTML DOM 1

2 Acceso a elementos HTML Mediante JavaScript es posible accesar en lectura y escritura los elementos de una página HTML. Es posible, por ejemplo: Cambiar la la propiedad src de una imagen Cambiar el contenido de un textbox Cambiar el color del background de un documento Leer el contenido de los campos de una forma 2

Es posible, por ejemplo: Cambiar la la propiedad src de una imagen Cambiar el

3 Acceso a elementos HTML Para poder leer ó cambiar alguna propiedad de un objeto es necesario localizarlo. En javascript hay varias maneras de localizar objetos HTML: Mediante las colecciones del DOM Mediante la notación punto Mediante el método document.getelementbyid() Mediante el método document.getelementsbyname() Mediante el método documente.getelementsbytagname() Navegando el árbol de nodos 3

En javascript hay varias maneras de localizar objetos HTML: Mediante las colecciones del DOM

4 Colecciones del DOM DOM (Document Object Model) incluye 4 colecciones que agrupan objetos relacionados: document.images document.links document.forms document.anchors 4

5 Colecciones del DOM <html><head> <Ytle>JavaScript Document Object Example</Ytle> </head> <body> <a href="h]p:// more books</a> <br /> <a href="h]p:// making Google rich</a> <br /> <script language="javascript" type="text/javascript"> for (var i=0; i<document.links.length; i++) { document.write( document.links[i] + "<br />" ); } </script> </form> </body></html> 5

com">stop making Google rich</a> <br /> <script language="javascript" type="text/javascript"> for

6 Notación punto Algunos browsers permiten accesar las formas y sus elementos como una propiedad del documento uylizando el atributo name. Esta facilidad debe usarse con precaución ya que no todos los browsers la soportan. document.formname.inputname 6

7 Notación punto <html><head><ytle>objects</ytle> <script language="javascript"> <! funcyon first() { alert("la caja de texto conyene el string: " + document.myform.mytext.value); } funcyon second() { var mystring= "El checkbox "; if (document.myform.mycheckbox.checked) mystring+= "esta marcado" else mystring+= "no esta marcado"; alert(mystring); } // > </script></head> 7

value); } funcyon second() { var mystring= "El checkbox "; if (document.myform.mycheckbox.

8 Notación punto document.myform.mycheckbox <body> <form name="myform"> <input type="text" name="mytext" value="texto de prueba"> <input type="bu]on" name="bu]on1" value="boton 1" onclick="first()"> <br> <input type="checkbox" name="mycheckbox" checked= "checked"> <input type="bu]on" name="bu]on2" value="boton 2" onclick="second()"> </form> </body> </html> 8

prueba"> <input type="bu]on" name="bu]on1" value="boton 1" onclick="first()"> <br> <input

9 Notación punto 9

10 getelementbyid El método getelementbyid() regresa una referencia al primer objeto cuyo id coincida con el especificado. document.getelementbyid(id) 10

11 getelementbyid <html><head> <Ytle>ID Sample</Ytle> </head> <body> <p id= simple >He s pining for the sords!</p> <script language="javascript" type="text/javascript"> var parra1; parra1 = document.getelementbyid( simple ); alert(parra1.innerhtml); </script> </body> </body></html> 11

</p> <script language="javascript" type="text/javascript"> var parra1;

12 getelementsbyname El método getelementsbyname () regresa una colección de objetos con el nombre especificado. document.getelementsbyname(name) 12

13 getelementsbyname <html> <head> <script type="text/javascript"> funcyon getelements() { var x=document.getelementsbyname("myinput"); alert(x.length); } </script> </head> <body> <input name="myinput" type="text" size="20" /><br /> <input name="myinput" type="text" size="20" /><br /> <input name="myinput" type="text" size="20" /><br /> <br /> <input type="bu]on" onclick="getelements()" value="how many elements named 'myinput'?" /> </body> </html> 13

length); } </script> </head> <body> <input name="myinput" type="text" size="20" /><br /> <input name="myinput"

14 getelementsbytagname El método getelementsbytagname () regresa una colección de objetos cuya eyqueta coincide con el nombre especificado. document.getelementsbytagname(tagname) 14

15 getelementsbytagname <html><head> <script type="text/javascript"> funcyon getelements(){ var x=document.getelementsbytagname("input"); alert(x.length);} </script> </head><body> <input name="name" type="text" size="20" /><br /> <input name="address" type="text" size="20" /><br /> <input name="school" type="text" size="20" /><br /> <br /> <input type="bu]on" onclick="getelements()" value="how many input elements?" /> </body></html> 15

length);} </script> </head><body> <input name="name" type="text" size="20" /><br /> <input name="address"

16 JavaScript CSS Equivalentes 16

17 JavaScript CSS Equivalentes var myh1array = document.getelementsbytagname("h1"); var myelem = myh1array.item(0); var mystyle = myelem.style; var ffamily = mystyle.fontfamily; var fsize = mystyle.fontsize; alert("h1 :\nfamily: " + ffamily + "\nsize: " + fsize); Despliega el font y el tamaño del texto de los encabezados <h1> 17

$fontsize; alert("h1 :\nfamily: " + ffamily + "\nsize: " + fsize); Despliega el$

18 Navegando el árbol de nodos Un documento HTML se representa como un árbol con elementos, atributos y texto y define así una manera de manipular los documentos 18

19 Un árbol DOM 19

20 Ejemplo DOM 20

21 Ejemplo DOM <p align="right">hello <em>world</em></p> <body> otros elementos <p> align otros elementos Hello <em> right World 21

22 Acceso a los nodos de un documento Todos los nodos del DOM son accesibles. Esto se logra de varias maneras: Usando los métodos getelementbyid(), getelementsbyname() y getelementsbytagname() Usando las propiedades parentnode, childnodes[], firstchild, and lastchild, nextsibling, previoussibling 22

23 Propiedades de los Nodos nodename id tagname nodevalue nodetype a]ributes[] geta]ribute(), seta]ribute(), removea]ribute() 23

24 Métodos para modificar el DOM document createelement() createtextnode() createdocumentfragment() appendchild() node insertbefore() removechild() replacechild() 24

25 Acceso a los nodos de un documento <html><body> <p id="intro">hello World!</p> <p id="main">this is an example for the HTML DOM tutorial.</p> <script type="text/javascript"> txt=document.getelementbyid("intro").childnodes[0].nodevalue; document.write("the text from the intro paragraph: " + txt); </script> </body></html> 25

Documentos relacionados

DOM. Mediante JavaScript es posible accesar en lectura y

DOM. Mediante JavaScript es posible accesar en lectura y Acceso a los elementos XHTML DOM 1 Acceso a elementos HTML Mediante JavaScript es posible accesar en lectura y escritura los elementos de una página ái HTML. Es posible,,por ejemplo: Cambiar la la propiedad