Viendo el árbol del DOM de JavaScript, parte por parte
Capítulo 49: El árbol del DOM
En esta ocasión, te voy a mostrar el manejo del árbol del DOM con JavaScript con ejemplos prácticos.
Seguimos avanzando con el manejo del DOM. En este capítulo te voy a mostrar como funciona el árbol del DOM.
Las etiquetas HTML en el DOM
Las etiquetas HTML son objetos en el DOM. El manejo de estos objetos (etiquetas) será el mismo que con cualquier otro objeto instanciado en JavaScript. Aquí tienes un ejemplo:
document.body
Con esto, se representa el objeto body correspondiente al <body>.
Una vez tenemos acceso a una etiqueta en concreto podemos nombrar a atributos como style que permiten desde HTML cargar estilos CSS directamente desde la propia etiqueta.
document.body.style
Con esto, podemos utilizar las propiedades CSS desde JavaScript, como background para modificar el fondo del <body>.
document.body.style.backgroundA estas propiedades, les puedes dar valores desde JavaScript como si los escribieras directamente en la etiqueta:
document.body.style.background = "firebrick"
Estructura del DOM
Comencemos con una página HTML muy simple con la que puedas apreciar la estructura del DOM de forma más simple.
<!doctype html>
<html>
<head>
<title>Curso de JavaScript</title>
</head>
<body>
<p>Soy una página muy simple :)</p>
</body>
</html>Aquí tienes la representación equivalente en un árbol del DOM:
Si quieres hacer tus propias pruebas, puedes utilizar esta maravillosa herramienta: Live DOM Viewer. Es muy fácil de usar. Solo tienes que pegar las etiquetas HTML en el primer cuadro de texto y automáticamente se te cargará el árbol del DOM.
Cada etiqueta es un nodo (<html>, <head>, <title>, <body>...)
Las etiquetas HTML se encapsulan entre ellas, en este simple ejemplo, <html> encapsula todo, tanto a <head> como a <body>. Los nodos dentro de nodos se denominan normalmente como hijos, y estos hijos tienen otros hijos, podemos llamarlos subnodos o subelementos a partir de ahora. Un ejemplo es el <body>, este es un subnodo de <html> y <p> es un subnodo de <body>.
Dentro de los nodos tenemos lo que se etiqueta como #text (hojas del árbol), estos son cadenas de caracteres. Fíjate que los saltos de línea también son representados en el árbol (tecla ENTER ).
Con esto acabamos de descomponer a HTML, ya podemos trabajar a más bajo nivel con estos conocimientos.
Si pones las etiquetas todas juntas, se eliminan los #text equivalentes a los saltos de línea. En esta página, solo he puesto un salto de línea para todo:
<!doctype html><html><head><title>Curso de JavaScript</title></head>
<body><p>Soy una página muy simple :)</p></body></html>
Errores de escritura en HTML
¿No te ha ocurrido que escribiendo en HTML se te ha olvidado cerrar alguna etiqueta? Yo me he olvidado en alguna ocasión hasta de escribir el <body>, cosas que pasan al acostumbrarse a utilizar el autocompletador del editor código o del IDE.
No obstante, funciona correctamente en el navegador. ¿Cómo ocurre esta magia?
Página HTML sin BODY
<!doctype html>
<html>
<head>
<title>Curso de JavaScript</title>
</head>
<p>Soy una página muy simple :)</p>
</html>Funciona todo correctamente.
Si inspeccionamos con las herramientas de desarrollador del navegador, podemos ver que se ha autogenerado el <body>.
Tenemos un ángel de la guarda siempre ayudándonos, nuestro querido navegador. Este al leer el DOM, si encuentra errores los corrige en la medida de lo posible para subsanar nuestros errores. En el árbol sigue apareciendo el DOM.
Esto ocurrirá igual si te olvidas un cierre de un </div>, un </p>, etc.
Los comentarios en el DOM
¿Habías pensado ya qué ocurre con los comentarios? Todo lo que está en el documento aparecerá en el árbol del DOM, incluso los comentarios.
<!doctype html>
<html>
<head>
<title>Curso de JavaScript</title>
<script>
// Escribe aquí el código de JavaScript
</script>
</head>
<body>
<!-- Escribir aquí lo que se va a mostrar en el documento -->
</body>
</html>
Los comentarios html aparecen etiquetados con algo nuevo #comment. Sin embargo, los de JavaScript, aparecen como #text.
Según el estándar de DOM tenemos 12 nodos del tipo de #text o #comment. Iremos viendo, de momento, ya sabes que el nodo de entrada al DOM es document, que los elementos html son otro tipo de nodo, que el texto es con el nodo #text y que los comentarios con #comment.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
