Nõuanded koodi kirjutamiseks DOM-i näitel JavaScriptis

Oletame, et seisate silmitsi piisavalt keerulise ülesandega, mille lahendamiseks on vaja kirjutada teatud kogus koodiridu.

Vale lähenemine oleks püüda kirjutada kogu lahenduse kood korraga ja alles seejärel hakata seda kontrollima. Sellisel juhul on suur tõenäosus, et miski ei hakka tööle ning viga tuleb otsida suurest koodihulgast.

Õige lähenemine on jagada ülesanne väikesteks elementaarseteks sammudeks, mida te rakendate ja kohe kontrollite nende õigsust. Sel juhul, isegi kui te kusagil eksite, märkate te probleemi kohe ja parandate selle.

Proovime seda praktikas. Oletame, et teil on lõigud:

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

Oletame, et teie ülesandeks on leida lõigud, mille numbrid on 3-ga jaguvad, ja leida nende arvude summa.

Esimest väikest sammu soovitaksin saada meie lõigud massiivi kujul ja väljastada see massiiv konsooli, et näha, kas saime kõik õigesti. Teeme selle:

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

Järgmise väikese sammuna tuleb meie lõigud tsükliga läbida ja väljastada igaüks neist konsooli eraldi:

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

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

Ja nüüd väljastame tsüklis meie lõigude tekstid:

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

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

Nüüd väljastame tekstid neist lõigutest, mille number jagub 3-ga:

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

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

Olles veendunud, et saame õiged lõigud, võime asuda nende arvude summeerimisele:

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>