Consejos para escribir código usando el ejemplo del DOM en JavaScript

Supongamos que tienes una tarea de complejidad suficiente, para cuya implementación necesitas escribir una cierta cantidad de líneas de código.

Un enfoque incorrecto sería intentar escribir todo el código de la solución de una vez, y luego empezar a verificarlo. En este caso, existe una alta probabilidad de que nada funcione, y tengas que buscar el error en una gran cantidad de código.

El enfoque correcto es dividir la tarea en pequeños pasos elementales, que implementarás y verificarás inmediatamente su corrección. En este caso, incluso si cometes un error en algún lugar, lo notarás inmediatamente y podrás corregirlo.

Probemos en la práctica. Supongamos que tienes párrafos:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

Supongamos que tu tarea es encontrar los párrafos con números múltiplos de 3, y encontrar la suma de sus números.

Como primer pequeño paso, sugeriría obtener nuestros párrafos en forma de array y mostrar este array en la consola, para verificar que hemos obtenido todo correctamente. Hagámoslo:

let elems = document.querySelectorAll('p');
console.log(elems);

El siguiente pequeño paso es recorrer nuestros párrafos con un ciclo y mostrar cada uno de ellos en la consola por separado:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem);
}

Y ahora en el ciclo mostremos los textos de nuestros párrafos:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem.textContent);
}

Ahora mostremos los textos de aquellos párrafos cuyo número es divisible por 3:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		console.log(text);
	}
}

Una vez verificado que estamos obteniendo los párrafos correctos, podemos proceder a sumar sus números:

let elems = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		sum += text;
	}
}

console.log(sum);

Dada una lista con años:

<ul>
	<li>2000</li>
	<li>2004</li>
	<li>2021</li>
	<li>2022</li>
	<li>2025</li>
	<li>2031</li>
</ul>

Obtén los años cuya suma de dígitos sea igual a 6. Encuentra la suma de los años obtenidos.