Sfaturi pentru scrierea codului cu exemplu de DOM în JavaScript

Să presupunem că aveți o sarcină suficient de complexă, pentru implementarea căreia trebuie să scrieți un anumit număr de linii de cod.

Abordarea greșită ar fi să încercați să scrieți întregul cod al soluției deodată, și abia apoi să începeți să îl verificați. În acest caz, există o probabilitate mare că nimic nu va funcționa, iar eroarea va trebui căutată într-o cantitate mare de cod.

Abordarea corectă este împărțirea sarcinii în mici pași elementari, pe care îi veți implementa și verifica imediat corectitudinea lor. În acest caz, chiar dacă greșiți undeva, veți observa imediat problema și o veți corecta.

Să încercăm în practică. Să presupunem că aveți paragrafele:

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

Să presupunem că sarcina este să găsiți paragrafele cu numere divizibile cu 3, și să găsiți suma acestor numere.

Primul mic pas aș sugera să obținem paragrafele noastre sub formă de array și să afișăm acest array în consolă, pentru a verifica că am obținut totul corect. Să facem asta:

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

Următorul mic pas este să parcurgem paragrafele noastre cu un ciclu și să afișăm fiecare dintre ele în consolă separat:

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

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

Și acum în ciclu să afișăm textele paragrafelor noastre:

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

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

Acum să afișăm textele acelor paragrafe al căror număr este divizibil cu 3:

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

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

După ce ne-am asigurat că obținem paragrafele corecte, putem trece la însumarea numerelor lor:

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>