Entendiendo el el DOM

La librería jQuery aprovecha el poder de las hojas de estilos CSS y de sus selectores para acceder rápida y fácilmente a los elementos en el Document Object Model o DOM, este es el aspecto más poderoso de jQuery.

¿Qué es el DOM?

El Document Object Model o Modelo de Objetos del Documento es simplemente la forma estándar que los navegadores web acordaron en seguir para representar los Objetos HTML en el documento. Este nos sirve como interfaz, en este caso entre jQuery y la pagina web por que nos proporciona una representación de la fuente HTML como una red de objetos sin formato. Esta red también se le compara como un árbol, igual al árbol genealógico familiar por las relaciones que mantienen los elementos entre sí. Por eso se utiliza la misma terminología que usamos cuando nos referimos a las relaciones familiares: Padres, Hijos, Hermanos y así sucesivamente. Veamos un ejemplo sencillo que creo que nos va a ayudar a entender como esta metáfora del árbol familiar se aplica al DOM.

el-DOM-jQuery

Vemos como el elemento superior el HTML, podríamos decir que es el primer padre, los descendientes directos de <html> son el <head> y el <body>, a su vez el <body> tiene como hijo directo al <div> que a su vez es nieto de <html> y el <div> tiene como hijos directos a los <p> que entre los 3 <p> se constituyen en hermanos, teniendo como abuelo al body y bis-abuelo al <html>.

Para visualizar mejor la estructura de árbol o DOM de cualquier página web podemos utilizar las herramientas de desarrollo de los navegadores Firefox, Chrome, IExplorer o Safari, o los complementos de desarrollo tales como Firebug.

Con esta analogía del Árbol DOM vamos a ser capaces de localizar de manera eficiente los elementos de nuestro documento web, las herramientas serán los selectores y métodos transversales.

arbol-dom-jquery

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *