El manejo de elementos del DOM por ID y las herramientas de desarrollo - Curso de JavaScript de cero a máster - Capítulo 50

Seguimos viendo más cosas sobre el DOM. Empecemos con las herramientas de desarrolladores. Yo estoy utilizando Chrome en las explicaciones. En la mayoría de navegadores es parecido. Si tienes dudas utilizando otro navegador, déjame un comentario.

Copia esta página HTML y cárgala en el navegador. Abre las herramientas de desarrollador del navegador.

Página HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML 5 - Plantilla básica</title>
</head>
<body>

	<header>
		<h1>Página web en html5</h1>
		<h3>Esta página está escrita en html 5</h3>
	</header>

	<nav>
		<ul>
			<li><a href="#">Enlace 1</a></li>
			<li><a href="#">Enlace 2</a></li>
			<li><a href="#">Enlace 3</a></li>
		</ul>
	</nav>

	<section>
		<article>
			<header>
				<p class="date">19, enero de 2022</p>
				<h2>Título del artículo</h2>
			</header>
			<p>Este es el contenido del artículo.</p>
		</article>

		<div class="comments">
			<p><a href="#">0 comentarios.</a></p>
		</div>
	</section>

	<aside>
		<div class="related">
			<p>Contenido relacionado indirectamente.</p>
		</div>

		<div class="related">
			<p>Contenido relacionado indirectamente.</p>
		</div>
	</aside>

	<footer>
			<p>Aquí va el pie de página.</p>
	</footer>

</body>
</html>

Si vas pasando el cursor por cada una de las etiquetas, verás como se va marcando el dominio de estas en el documento. Además, en la zona inferior marcada en la imagen, tenemos el árbol del DOM simplificado (se omiten #text, #comment, etc.). Puedes utilizar esto para tener una vista simplificada de nodos cuando trabajes con el DOM.

Etiquetas HTML en las devtools de Chrome

También, puedes activar esta opción:

Etiquetas en el DOM HTML

Lo que permite es que se muestren detalles sobre cada una de las etiquetas, de ese modo, podemos trabajar rápidamente viendo las secciones del documento que nos interesen.

El nodo de entrada al DOM

El nodo de entrada al DOM es document, tal y como dije en el capítulo anterior. Veamos el nodo que está por encima de todo.

Código JavaScript

let documento = document;
console.log(documento);

terminal Resultado en la consola terminal

Nodo document DOM

A partir de aquí, podemos acceder a otros nodos inferiores.

Puedes pensar entonces, que para acceder al siguiente nivel tienes que escribir esto:

Código JavaScript

let documento = document.html;
console.log(documento);

Sin embargo, esto devuelve un valor de undefined, ya que la etiqueta html se representa como documentElement.

Palabra del lenguaje nº 71 encontrada.
documentElement() es el elemento raíz del documento. En HTML se corresponde con la etiqueta <html>.

Código JavaScript

let documento = document.documentElement;
console.log(documento);

terminal Resultado en la consola terminal

documentElement DOM

¡Genial! Hemos conseguido bajar un nivel más.

Al body ya sabes como acceder:

Código JavaScript

let cuerpoPagina = document.body;
console.log(cuerpoPagina);

terminal Resultado en la consola terminal

document body DOM
Cuidado si estás cargando la hoja externa con código JavaScript en la cabecera, ya que por ejemplo, el acceso al <body>, puesto que se carga después del <head> te dará un valor de null que nos indicará que el elemento no existe, (aún no se ha creado en el flujo de ejecución).

El acceso al <head> es así:

Código JavaScript

let cabeceraPagina = document.head;
console.log(cabeceraPagina);

document head DOM

Nodos e hijos en el DOM

Tal y como expliqué brevemente, los nodos pueden tener hijos, es decir los nodos que tienen dentro. A su vez, estos tienen otros hijos. En la siguiente página HTML tenemos que <head> y <body> son hijos de <html>, en <body> tenemos su hijo <ul> y este tiene sus propios hijos <li>.
Aunque cada uno tenga sus correspondientes hijos, hay que tener en cuenta los subárboles. Por ejemplo el subárbol del <body> es al que pertecen los hijos y todos los niveles de hijos inferiores hasta el fin del </body>.

Página HTML

<!doctype html>
<html>
<head>
	<title>Curso de JavaScript</title>
</head>
<body>
	<ul>
		<li>Primer elemento.</li>
		<li>Segundo elemento.</li>
	</ul>
</body>
	<script src="test.js"></script>
</html>

Todo esto quedará más claro con unas pruebas. Vamos a utilizar algo nuevo para acceder a todos los hijos e hijos de hijos, etc. Se trata de childNodes.

Palabra del lenguaje nº 72 encontrada.
childNodes() es una propiedad de Node que devuelve una colección de nodos hijos a partir de un elemento dado.

Código JavaScript

console.log(document.head.childNodes);

terminal Resultado en la consola terminal

Nos devuelve el subárbol con los objetos del DOM correspondiente solo al <head>.

Document childNodes head DOM

Si desplegamos uno de los objetos del árbol como title, veremos la cantidad de propiedades que tiene, casi todas null por defecto. Entre todas esta locura, podemos encontrar algo de "cordura" (aún es pronto para profundizar aquí):

Document childNodes propiedades DOM

Imagina el poder en tus manos cuando domines todas estas propiedades y puedas manejar el DOM a tu absoluto antojo. La sensación, al menos para mí es mágica.

¿Qué es nodeList?

Palabra del lenguaje nº 73 encontrada.
nodeList es una colección. Algo parecido a un array, pero no exactamente un array. De momento, lo trataremos igual que los array normales. Si profundizamos en sus elementos, tenemos claves y valores.
Sencillamente, un nodeList almacena en posiciones cada uno de los nodos.

Ahora, fíjate en la imagen de un poco más arriba, donde pone "NodeList(3)". ¿Te has fijado que tiene una longitud?

Aquí es donde entra una vez más nuestro infalible amigo length.

Podemos iterar fácilmente cualquier elemento de esta forma:

Código JavaScript

for (let i = 0; i < document.head.childNodes.length; i++) {
	console.log( document.head.childNodes[i] );
}

terminal Resultado en la consola terminal

Sencillamente, así podemos iterar los objetos devueltos con childNodes y mostrar el subárbol con sus elementos de forma parecida a cuando lo mirábamos en Live DOM Viewer.

Arbol del head DOM

Para hacer lo mismo con el <body>, supongo que te imaginas como hacerlo:

Código JavaScript

for (let i = 0; i < document.body.childNodes.length; i++) {
	console.log( document.body.childNodes[i] );
}

¿Cómo controlar los elementos del DOM por ID en JavaScript?

Vayamos a cosas más interesantes. Vamos a ver el manejo de cualquier elemento HTML desde JavaScript mediante su atributo id. Aquí tienes un ejemplo:

Página HTML

<!doctype html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
	<title>Curso de JavaScript</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossorigin="anonymous">
</head>
<body style="margin:1em">
	<div class="card text-white bg-danger mb-3" style="max-width: 18em;">
		<div class="card-header" onclick="muestraSpoiler()">Pulsa para desplegar</div>
		<div class="card-body" id="spoiler">
			<h5 class="card-title">¡Mostrando el contenido oculto!</h5>
			<p class="card-text">Este texto estaba oculto. Se ha mostrado gracias a JavaScript.
			<br>
			El diseño ya es cosa de BootStrap.</p>
		</div>
	</div>
</body>
	<script src="test.js"></script>
</html>

Código JavaScript

// El elemento con id "spoiler" queda oculto por defecto.
document.getElementById("spoiler").style.display = "none";

// Si se llama a esta función, se muestra el elemento con id "spoiler"
function muestraSpoiler() {
	document.getElementById("spoiler").style.display = "block";
}

Resultado en el navegador

Al cargar la página, aparece esto:

Mostrar texto oculto con JavaScript

Al hacer click en el <div> se muestra el contenido que he decidido ocultar.

Ocultar div con JavaScript

Puede que ya lo entiendas todo, pero hay que explicar como funciona. Sin entrar en temas propios de HTML, CSS o BootStrap.

En la línea 13 de la página HTML, se permite llamar a la función al hacer click gracias a onclick. Ya hablé de esto anteriormente.

En la siguiente línea tenemos un <div> con el id = "spoiler". Ese es el que utilizamos para vincular el elemento HTML con el código JavaScript.

No puedes repetir nombres de id en la misma página HTML, deben ser únicos. Además, cuidado con dar nombre a variables en JavaScript iguales a los id que pongas en HTML, puedes tener problemas.

En el código JavaScript, en la línea 2, llamamos del documento, al elemento con ID "spoiler" gracias a getElementById(). Al hacer esto, ya hemos puesto el foco en el <div> en concreto. Solo queda indicarle que atributo queremos utilizar en ese elemento HTML (style). Puesto que style es un atributo que permite utilizar propiedades CSS en HTML, eso es lo que hacemos, utilizar la propiedad display con un valor de "none". Esto equivale a decirle que no me muestre el elemento.

Finalmente, si llamamos a la función pulsando el <div>, se llama a la función. La función le da otro valor a lo mismo de antes, esta vez, se cambia el "none" por el "block". Lo cual, se resume en que mostramos el elemento.

La explicación de este capítulo ha sido muy extensa, pero ahora, seguro que estás pensando en un montón de posibilidades utilizando getElementById.