Dicas para escrever código usando DOM em JavaScript como exemplo

Suponha que você tenha uma tarefa de complexidade suficiente, para cuja implementação é necessário escrever uma certa quantidade de linhas de código.

A abordagem incorreta seria tentar escrever todo o código da solução de uma vez, e só então começar a testá-lo. Nesse caso, há uma alta probabilidade de que nada funcione, e você terá que procurar o erro em uma grande quantidade de código.

A abordagem correta é dividir a tarefa em pequenos passos elementares, que você irá implementar e verificar sua correção imediatamente. Dessa forma, mesmo se você errar em algum lugar, notará o problema imediatamente e poderá corrigi-lo.

Vamos tentar na prática. Suponha que você tenha os parágrafos:

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

Suponha que a tarefa seja encontrar os parágrafos com números múltiplos de 3, e encontrar a soma desses números.

Como primeiro pequeno passo, eu sugiro obter nossos parágrafos como um array e exibir esse array no console, para verificar se conseguimos tudo corretamente. Vamos fazer isso:

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

O próximo pequeno passo é iterar nossos parágrafos com um loop e exibir cada um deles no console individualmente:

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

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

E agora, no loop, vamos exibir os textos dos nossos parágrafos:

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

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

Agora vamos exibir os textos daqueles parágrafos cujo número é divisível por 3:

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

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

Tendo verificado que estamos obtendo os parágrafos corretos, podemos prosseguir para somar seus 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 uma lista com anos:

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

Obtenha os anos cuja soma dos dígitos é igual a 6. Encontre a soma dos anos obtidos.