Bienvenidos sean a este post, hoy hablaremos sobre el modelo de objetos antes de entrar en jQuery.
Comencemos mencionando que significa DOM, Document Object Model, de una forma muy sencilla de explicar este es el encargado de hacer de interfaz entre los elementos HTML de la pagina y nuestro codigo Javascript, esto lo hace a traves de una representacion de los elementos como una red de objetos en lugar de hacerlo como un texto plano, la forma de trabajarlo podemos considerarlo como un arbol, veamos la siguiente imagen
Una vez que se carga la pagina, el navegador se encargara de transformar el codigo en este modelo de objetos para que pueda ser accedida por Javascript permitiendo que podamos trabajar con OOP, Programacion Orientada a Objetos por sus siglas en Ingles, para poder trabajar con ellos ya hemos utilizado algunas de sus funciones, estas son:
- getElementsByName
- getElementsByTagName
- getElementsById
- getElementsByClassName
Las cuales nos buscan un elemento en base a su nombre, tag, class o id, y relacionarlo a una variable dentro de nuestro codigo de Javascript para poder manipularlo, en el post anterior vimos un par para poder manipular los elementos de nuestro HTML y asi poder interactuar con ellos, pero tambien disponemos de algunas formas de poder acceder a elementos mediante algunas de las siguientes propiedades:
- document.anchors, nos devuelve todos los elements <a> con un atributo name
- document.body, nos devuelve el elemento <body>
- document.documentElement, nos devuelve el elemento <html>
- document.embeds, devuelve todos los elementos <embed>
- document.forms, devuelve todos los elementos <form>
- document.head, nos devuelve el elemento <head>
- document.images, devuelve todos los elementos <img>
- document.scripts, devuelve todos los elementos <script>
- document.title, nos devuelve el elemento <title>
Esto son solo algunos de los disponibles, o de los que nos pueden interesar de forma basica, para ver como trabaja vamos a crear un ejemplo y para ello haremos un nuevo archivo con el nombre de dom.html con el siguiente codigo:
dom.html
<html>
<head>
<title>Pagina de DOM</title>
<script language="javascript">
<!--
function mostrar()
{
var c=document.getElementById("capa");
var c2=document.getElementById("capa2");
var c3=document.getElementById("capa3");
c.innerText="body: " + document.body.innerHTML;
c2.innerText="head: " + document.head.innerHTML;
c3.innerText="title: " + document.title;
}
//-->
</script>
</head>
<body onload="mostrar()">
<p>Primera linea</p>
<div id="capa"></div>
<div id="capa2"></div>
<div id="capa3"></div>
</body>
</html>Aqui realizamos una pagina basica de HTML, donde definimos un head, un title y un body, en este ultimo mostramos una lniea y despues tendremos tres div los cuales ahora estan vacios pero los usaremos con nuestro codigo de Javascript, por ultimo al momento de carga de body llamaremos a una funcion del Javascript, pasemos a hablar sobre esto.
En este caso definiremos una funcion la cual sera llamada por medio del evento onload, primero definiremos tres variables que vincularemos a los tres div a traves de getElementById, hablemos de que hicimos en cada una de estas, antes de entrar en detalles mencionamos que para escribir en cada una de ellas usamos al metodo innerText y a este le ingresamos una etiqueta de cada valor que mostraremos, para el primer caso indicamos que sera el elemento body y despues le pasamos el elemento body y por medio de innerHTML obtendremos todo el codigo del mismo, para la segunda hacemos lo mismo pero para el elemento head y volvemos a usar innerHTML y en la tercera lo haremos para el elemento title pero como este es un valor no es necesario usar innerHTML, si lo ejecutan deberan obtener una salida semejante a esta
Observen como podemos mostrar todo el contenido de cada uno de los elementos, como de una manera simple podemos acceder a los elementos y a su vez modificarlos todo esto de forma dinamica sin la necesidad de tener multiples paginas para reflejar estos cambios, y todo gracias a DOM, recuerden que esto se genera automaticamente y no es necesario habilitar o configurar algo en los navegadores de los clientes y por ende tambien se encuentra accesible en jQuery pero de esto hablaremos a partir del proximo post.
En resumen, hoy hemos visto DOM, que es, que nos permite hacer, como nos beneficia, un ejemplo simple para ver como trabaja a traves de sus distintos medios, y preparandonos para lo que viene, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 