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>
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>
EJECICIOS REALIZADOS EN CLASE:
No hay comentarios.:
Publicar un comentario