19. JavaScript: el DOM
¿Qué es el DOM?
El DOM es la representación de una página web en forma de objetos. Recuerda que el objeto es un tipo de dato. Aquí abajo tenemos un ejemplo de un objeto:var libro = {
titulo: "Jarama",
paginas: 200
};
El DOM, al igual que un documento HTML, es también una estructura jerarquica, pero de nodos en vez de etiquetas. Veamos un ejemplo:
El siguiente documento HTML:
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</html>
tiene la siguiente representación DOM:
Para referirnos al DOM, podemos utilizar la siguiente expresiones:
- El nodo padre, el nodo abuelo, etc, o los nodos antecesores. Por ejemplo, el nodo <p> es un nodo hijo de <body>.
- Los nodos hijos. Por ejemplo, el nodo <body> tiene dos nodos hijos <h1> y <p>.
- Los nodos hermanos. Por ejemplo, el nodo <head> es hermano del nodo <body>.
- Los "nodos descendientes" de un nodo para referirnos a todos los nodos por debajo de un nodo).
- O los "nodos antececesores" de un nodo para referirnos a los nodos que estan "por encima" jerarquicamente.
También podemos ver la representación DOM del código HTML anterior en la consola de un navegador si en nuestro código JS escribimos lo siguiente:
console.log(document);
A continuación, acudimos a la consola y veremos escrito lo siguiente:
Si clicamos sobre el triangulito que aparece a la izquierda de HTMLDocument, veremos que se despliega información en forma de objeto, es decir HTMLDocument es un dato de tipo objeto. A continuación buscamos una propiedad que se llama "childNodes", y pulsamos y pulsamos sobre su triangulito para mostar su contenido. Como podemos ver aparecen 2 elementos que tienen como identificadores los números 1 y 2, y a continuación aparece una propiedad que tiene como nombre "length". Los elementos identificados con 1 y 2 (Document y <html>) son dos nodos del DOM que representan a las etiquetas <!DOCTYPE html>, y <html> del código HTML. Por otro lado, "length" es una propiedad que indica la cantidad de nodos que cuelgan de "document", o sea, los 2 mencionados anteriormente.
Es posible seguir explorando la estructura del DOM, pulsando sobre las propiedades "childNodes" de cada uno de los nodos.
Volviendo a la linea "console.log(document)", el objeto "document" es el objeto que representa al documento HTML, es por tanto el objeto RAIZ del DOM, del que parten el resto de los nodos.
Cada nodo además sus propios métodos. Por ejemplo, el nodo "document" posee métodos como getElementById() o getElementsByTagName(). Podemos invocar dichos métodos como si fuesen propiedades, es decir a través del punto (.). Por ejemplo:
document.getElementById();
Comentarios
Publicar un comentario