Cargando

Ir a contenido


 


HTML5 – DOM parte 2

En este tutorial veremos como poder trabajar con el DOM utilizando el lenguaje Javascript para poder interactuar con los objetos.


Escrito por el nov 06 2013 21:18 htmle5 dom con javascript


En la primera parte de este tutorial estuvimos viendo como esta estructurado el DOM y como funciona, en este seguiremos trabajando con el de forma de extender las funcionalidades del mismo y poder manipular todos los elementos de nuestro documento HTML.

Trabajando con el DOM

Para acceder al objeto del documento utilizamos una variable global del documento; dicha variable es uno de los objetos clave que el navegador crea para nosotros, ya que a través de este objeto de documento es que podemos acceder a la información del documento como un todo y nos da acceso individual a cada objeto del documento.
Como siempre veamos un ejemplo con el cual podemos compaginar la teoría que sabemos con la forma en que se aplica en la realidad.

<!DOCTYPE HTML>
<html>
		 <head>
				 <title>Example</title>
		 </head>
		 <body>
				 <p id="fruittext">
							 There are lots of different kinds of fruit - there are over 500
							 varieties of <span id="banana">banana</span> alone. By the time we add the
							 countless types of apples, oranges, and other well-known fruit, we are faced
							 with thousands of choices.
				 </p>
				 <p id="apples">
							 One of the most interesting aspects of fruit is the
							 variety available in each country. I live near London, in an area which is
							 known for its apples.
				 </p>
		 <script>
					 document.writeln("<pre>URL: " + document.URL);
					 var elems = document.getElementsByTagName("p");
					 for (var i = 0; i < elems.length; i++) {
					 document.writeln("Element ID: " + elems[i].id);
					 elems[i].style.border = "medium double black";
					 elems[i].style.padding = "4px";
					 }
					 document.write("</pre>");
		 </script>
</body>
</html>

El código con el cual utilizamos el DOM es bastante corto y sencillo, sin embargo captura los diferentes usos que le podemos dar, vamos a explicar parte por parte el código para ir viendo como hemos utilizado los objetos.

Una de las acciones más básicas que podemos utilizar es obtener la información del documento HTML con el cual estamos trabajando por ello la primera línea que hemos colocado en nuestro código hace justo eso y la podemos ver:

document.writeln("<pre>URL: " + document.URL);

En este caso leemos el valor de la propiedad document.URL, la cual nos retorna el URL de documento actual, es decir, el URL que el navegador utilizó para cargar el documento en el cual tenemos el código.

También vemos como utilizamos el método writeln:

document.writeln("<pre>URL: " + document.URL);

Este método simplemente agrega contenido al final de nuestro documento HTML, en este caso en particular iniciamos agregando un tag <pre> y luego la propiedad URL, con esto ya hemos modificado la estructura y contenido del DOM.

Ahora lo siguiente que hicimos fue seleccionar todos los elementos que tengan la etiqueta p en el documento para ello utilizamos la siguiente línea:

var elems = document.getElementsByTagName("p");

Cómo vemos el método getElementsByTagName es el que sirve a nuestro propósito, al mismo tiempo todo lo que este método recolecte lo asignamos a la variable elems.

En la linea siguiente hacemos una iteración sobre la variable elems, obteniendo los objetos asignados, por cada uno que iteremos vamos a agregar una linea de texto con su id y posteriormente vamos a cambiar sus atributos para modificar su aspecto.

for (var i = 0; i < elems.length; i++) {
document.writeln("Element ID: " + elems[i].id);
elems[i].style.border = "medium double black";
elems[i].style.padding = "4px";
}


Como vemos agregamos un borde a cada elemento que tenemos almacenado en nuestra variable elems y adicionalmente agregamos un padding.

Luego de todo esto veamos finalmente como queda todo esto en el navegador:

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado nov 06 2013 21:18
  •   Actualizado nov 08 2013 16:26
  •   Visitas 743
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse