jQuery Blues: 1.DOM

En esta primera entrada sobre jQuery conoceremos qué es DOM, un interfaz de programación de aplicaciones para trabajar con HTML y XML.

klimt

archivado en: JavaScript / 24 octubre, 2012 / taller:

Comienzo con esta entrada una serie sobre jQuery, una biblioteca de JavaScript muy potente y flexible que cada día es más popular. A diferencia de la miriada de tutoriales sobre jQuery que hay por Internet, este está dedicado a mi amigo Rafa, lo que hace que sea único en su género y además, aunque en esto es menos original, trataré de que sea lo más sencillo posible y que baste con conocer HTML y algunas nociones elementales de progamación para poder seguirlo.

Antes que nada, sin embargo, es importante que hablemos de DOM, acrónimo de «Modelo de Objetos del Documento», un  interfaz de programación de aplicaciones (API) para trabajar con los lenguajes estructurados, como XML o HTML.

Dicho de otra forma menos enrevesada, DOM es un estándar que permite acceder y manipular los elementos de una página web mediante algún lenguaje de programación web, como JavaScript o su librería jQuery. Bueno, es probable que con esta definición sigamos sin haber entendido un pimiento, pero ahora no importa. Vamos a seguir y luego resultará todo más claro.

Árboles y nodos

Un árbol tiene muchas ramas y algunas ramas se dividen a su vez en otras ramas con más ramas y así hasta las hojas. Con un documento web sucede lo mismo. Es un árbol que se va ramificando hasta llegar a los datos. Por ejemplo, una rama principal es el <head> y otra el <body>. Dentro de la rama del <head> está la subrama del <title> y dentro del <body> una montonera de tags que incluyen otros tags que... Para hacernos una idea vamos a pensar en una web muy sencilla, una en la que solo se vean dos párrafos, uno que dice «tempus fugit» y en otro «carpe diem».

En HTML esa página se ramificaría en este árbol:

<html>

<head>

<title>

página de ejemplo

</title>

</head>

<body>

<p> Tempus fuggit </p>

<p>Carpe diem</p>

</body>

</html>

Si lo pusiéramos en un esquema quedaría algo así:

1. documento (html)

1.1. Head

1.1.1. Title

1.2. Body

1.2.1. Párrafo 1

1.2.2. Párrafo 2

Esas ramas son lo que en DOM se entiende por nodos. El párrafo 1 y el 2 son dos nodos hermanos, pues no existe jerarquía entre ellos y ambos depende del mismo nodo padre, que es body.

Hay varios tipos de nodos, pero de momento solo es importante que conozcamos dos:

  • Document: es el nodo raíz del documento DOM, el padre de todos los nodos o, dicho de forma más friki, el nodo para dominarlos a todos.  😆
  • Element (elementos): en HTML, son las etiquetas, ya sean pares de apertura y cierre —<p></p>,<b></b>,<quote></quote>— o las que funcionan de forma individual, como <img>, <meta>, etcétera.

Como sabemos, las etiquetas de HTML, que de aquí en adelante vamos a llamar elementos, pueden incluir distintos atributos. Por ejemplo, en el elemento imagen <img> se pueden especificar el atributo alto y el atributo ancho.

<img src="imagen.jpg" height="100" width="100">

El ancho y el alto no son atributos válidos para cualquier elemento. Por ejemplo, no se pueden aplicar para el elemento <a>, con el que se marca un enlace. Sin embargo, hay un tipo especial de atributos, llamados «globales», que se pueden incluir en todos los elementos. De estos, hay dos que se usan con frecuencia:

  • id: identifica de forma única un elemento. Es como ponerle nombre y apellidos. Solo puede haber un elemento con ese identificador.
  • class: define la clase a la que pertenece un elemento.

Y lo bueno es que se puede acceder y manipular cada elemento a partir de sus atributos. Así, se podría programar un script para que, al pulsarse un botón, todos los elementos de determinada clase se hicieran visibles, lo que permitiría hacer un menú desplegable, o para ampliar una imagen, para desplazarla... incluso para eliminar o añadir nodos.

De hecho, hay varias funciones de JavaScript muy habituales en cualquier página dinámica que permiten seleccionar los elementos por tipo, id o clase:

<script>

// Seleccionamos todos los elementos del tipo <p>

document.getElementsByTagName("p");

// Selecciona el elemento cuyo id se llama monglonfillos

document.getElementById("monglonfillos");

// Seleccionamos todos los elementos cuya clase es "rejurti"

document.getElementsByClassName("rejurti");

</script>

(Ver esto con más detalle)

Ahora que ya sabemos un poco mejor qué significa eso de DOM, qué es un elemento y qué es un atributo, vamos con jQuery.   🙂

|| Tags: ,

valoración de los lectores sobre jQuery Blues: 1.DOM

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.3 sobre 5 (47 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.