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:

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

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

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

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

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

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

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

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

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