Conseils pour écrire du code avec l'exemple du DOM en JavaScript

Supposons que vous soyez confronté à une tâche suffisamment complexe, pour laquelle il faut écrire un certain nombre de lignes de code.

Une mauvaise approche serait d'essayer d'écrire l'intégralité du code de la solution, puis de commencer à le tester. Dans ce cas, il est très probable que rien ne fonctionnera, et qu'il faudra chercher l'erreur dans une grande quantité de code.

La bonne approche consiste à décomposer la tâche en petites étapes élémentaires, que vous implémenterez et dont vous vérifierez immédiatement l'exactitude. Dans ce cas, même si vous faites une erreur quelque part, vous remarquerez immédiatement le problème et le corrigerez.

Essayons en pratique. Supposons que vous ayez des paragraphes :

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

Supposons que vous ayez pour tâche de trouver les paragraphes avec des nombres multiples de 3, et de trouver la somme de leurs nombres.

Comme première petite étape, je suggérerais d'obtenir nos paragraphes sous forme de tableau et d'afficher ce tableau dans la console, pour vérifier que nous avons bien tout obtenu correctement. Faisons cela :

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

La petite étape suivante consiste à parcourir nos paragraphes avec une boucle et à afficher chacun d'eux dans la console individuellement :

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

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

Et maintenant, dans la boucle, affichons les textes de nos paragraphes :

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

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

Maintenant, affichons les textes des paragraphes dont le nombre est divisible par 3 :

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

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

Après s'être assuré que nous obtenons les bons paragraphes, nous pouvons procéder à la sommation de leurs nombres :

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);

Une liste d'années est donnée :

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

Obtenez les années dont la somme des chiffres est égale à 6. Trouvez la somme des années obtenues.