El árbol del DOM - Curso de JavaScript de cero a máster - Capítulo 49

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:

Código JavaScript

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.

Código JavaScript

document.body.style

Con esto, podemos utilizar las propiedades CSS desde JavaScript, como background para modificar el fondo del <body>.

Código JavaScript

document.body.style.background

A estas propiedades, les puedes dar valores desde JavaScript como si los escribieras directamente en la etiqueta:

Código JavaScript

document.body.style.background = "firebrick"

Resultado en el navegador

Fondo body desde el DOM de JavaScript

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.

Página HTML

<!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:

Árbol 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 desnudar 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:

Página HTML

<!doctype html><html><head><title>Curso de JavaScript</title></head>
<body><p>Soy una página muy simple :)</p></body></html>
Árbol DOM

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 mágia?

Página HTML sin BODY

<!doctype html>
<html>
<head>
	<title>Curso de JavaScript</title>
</head>
	<p>Soy una página muy simple :)</p>
</html>

Resultado en el navegador

Funciona todo correctamente.

Página html sin etiquetas body

Si inspeccionamos con las herramientas de desarrollador del navegador, podemos ver que se ha autogenerado el <body>.

body de html

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.

Generación del 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.

Página HTML

<!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.

Comentarios en el DOM

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.