Tips Menulis Kode dengan Contoh DOM dalam JavaScript

Misalkan Anda dihadapkan pada tugas yang cukup kompleks, yang untuk mengimplementasikannya perlu menulis sejumlah baris kode.

Pendekatan yang salah adalah mencoba menulis seluruh kode solusi sekaligus, lalu mulai memeriksanya. Dalam kasus ini, kemungkinan besar hasilnya tidak akan berjalan, dan kesalahan harus dicari dalam sejumlah besar kode.

Pendekatan yang benar adalah membagi tugas menjadi langkah-langkah dasar kecil, yang akan Anda implementasikan dan segera periksa keberhasilannya. Dalam kasus ini, bahkan jika Anda melakukan kesalahan di suatu tempat, Anda akan segera menyadari masalahnya dan memperbaikinya.

Mari kita coba dalam praktik. Misalkan Anda memiliki paragraf:

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

Misalkan Anda dihadapkan pada tugas untuk menemukan paragraf dengan angka yang kelipatan 3, dan mencari jumlah dari angka-angka tersebut.

Langkah kecil pertama yang saya sarankan adalah mendapatkan paragraf kita dalam bentuk array dan menampilkan array ini di konsol, untuk memastikan bahwa kita mendapatkan semuanya dengan benar. Mari lakukan ini:

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

Langkah kecil berikutnya adalah mengulangi paragraf kita dengan loop dan menampilkan masing-masingnya di konsol secara terpisah:

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

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

Dan sekarang dalam loop, mari tampilkan teks dari paragraf kita:

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

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

Sekarang mari kita tampilkan teks dari paragraf yang angkanya habis dibagi 3:

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

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

Setelah memastikan bahwa kita mendapatkan paragraf yang benar, kita dapat melanjutkan ke penjumlahan angka-angkanya:

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>