Cargando



HTML5 – DOM parte 1

En este tutorial estaremos viendo las bases y la estructura del DOM en nuestros documentos HTML de forma que podamos conocer cómo podemos interactuar con él luego utilizando Javascript.


nov 06 2013 20:13
Profesional
nov 08 2013 17:29
El DOM que se refiere al Document Object Model, no es más que una representación de objetos de los elementos que están en nuestro documento HTML, gracias a esto podemos hacer una conexión más profunda con Javascript y logra efectos muy interesantes; sin embargo para llegar a ese nivel primero debemos conocer muy bien cómo manejarnos dentro del DOM para su implementación y utilización.

Entendiendo el DOM

Expandiendo un poco el concepto de DOM también podemos agregar que es una colección de objetos que representa el HTML en el documento, dentro de su nombre vemos lo que es un modelo y la palabra clave que representa, es un modelo representativo del documento HTML.

El DOM es una herramienta clave en el desarrollo WEB, ya que nos provee de un puente entre la estructura y el contenido entre nuestros documentos HTML y Javascript.

El modelo que estamos hablando es creado por el navegador cuando interpreta el código HTML, la estructura básica de un DOM la podemos ver de la siguiente forma en un esquema en la siguiente imagen:

html5_dom.jpg


Como vemos se basa en una estructura jerárquica, con esto logramos que podemos utilizar los caminos de estas relaciones para poder obtener información o hacer cambios estructurales vía Javascript.

Probando el DOM

Vamos a realizar unas pruebas sencillas sobre nuestro documento de forma que vayamos acostumbrándonos a como se puede trabajar con el DOM, una de las primeras pruebas que podemos realizar es comprobar que una funcionalidad esté disponible dentro del documento, veamos en el siguiente código:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Example</title>
</head>
<body>
	 <p id="paratext">
		 There are lots of different kinds of fruit - there are over 500 varieties
		 of banana alone. By the time we add the countless types of apples, oranges,
		 and other well-known fruit, we are faced with thousands of choices.
		 <img src="apple.png" alt="apple"/>
	 </p>
	 <script>
		 var images;
		 if ([b]document.querySelectorAll[/b]) {
			 images = document.querySelectorAll("#paratext > img");
		 } else {
			 images = document.getElementById("paratext").getElementsByTagName("img");
		 }
		 for (var i = 0; i < images.length; i++) {
			 images[i].style.border = "thick solid black";
			 images[i].style.padding = "4px";
		 }
	 </script>	
</body>
</html>

Aquí simplemente lo que hicimos fue algo sencillo, primero verificamos si existe el método querySelectorAll, si existe entonces a una variable le asignamos el contenido de todas los elementos img que tengan el id paratext, como estamos haciendo una comprobación en caso que esta falle utilizamos una forma diferente de obtener los mismos datos, en este caso es el getElementById y luego getElementByTagName, al final simplemente con nuestra variable definida vamos iterando por su contenido y cambiando las propiedades CSS de los mismos.

Tal vez acá lo negativo que podemos ver es que si tenemos muchas verificaciones, nuestro código puede volverse complejo e ilegible, todo es una cuestión de compromisos entre lo que queremos lograr y la forma de lograrlo, de esta forma poder obtener nuestros resultados.

En la siguiente parte de este tutorial estaremos viendo algunos ejemplos más avanzados de cómo seguir trabajando con el DOM.

¿Te ayudó este Tutorial?


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!

X