เคล็ดลับการเขียนโค้ดโดยใช้ DOM ใน JavaScript เป็นตัวอย่าง

สมมติว่าคุณกำลังเผชิญกับงานที่มีความซับซ้อนพอสมควร ซึ่งในการนำไปปฏิบัตินั้นต้องเขียนโค้ดหลายบรรทัด

วิธีการที่ผิดคือการพยายาม เขียนโค้ดสำหรับแก้ปัญหาทั้งหมดรวดเดียวเลย แล้วจึงเริ่มตรวจสอบมัน ในกรณีนี้มีโอกาสสูงมาก ที่ทุกอย่างจะไม่ทำงาน และคุณจะต้องค้นหาข้อผิดพลาดในโค้ดจำนวนมาก

วิธีการที่ถูกต้องคือการแบ่ง งานออกเป็นขั้นตอนพื้นฐานเล็ก ๆ ซึ่งคุณจะดำเนินการและตรวจสอบความถูกต้องทันที ในกรณีนี้ แม้ว่าคุณจะทำผิดตรงไหนสักแห่ง คุณก็จะสังเกตเห็น ปัญหานั้นได้ทันทีและสามารถแก้ไขได้

มาลองฝึกปฏิบัติจริงกัน สมมติว่าคุณมีย่อหน้า:

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

สมมติว่าคุณมีงานคือการหา ย่อหน้าที่มีตัวเลขที่หารด้วย 3 ลงตัว และหาผลรวมของตัวเลขเหล่านั้น

ขั้นตอนเล็ก ๆ ขั้นแรกที่ผมอยากเสนอคือ การดึงย่อหน้าของเราในรูปแบบของอาร์เรย์ และแสดงอาร์เรย์นี้ในคอนโซล เพื่อดูว่าเราได้ทุกอย่าง มาถูกต้องแล้ว ลองทำกัน:

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

ขั้นตอนเล็ก ๆ ขั้นต่อไปคือต้อง วนลูปผ่านย่อหน้าทั้งหมดของเรา และแสดงแต่ละย่อหน้า ในคอนโซลแยกกัน:

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

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

และตอนนี้ในลูป ให้แสดงข้อความ ของย่อหน้าทั้งหมดของเรา:

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

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

ตอนนี้เรามาแสดงข้อความ ของย่อหน้าที่ตัวเลขหารด้วย 3 ลงตัว:

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

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

หลังจากมั่นใจแล้วว่าเราได้ย่อหน้าที่ถูกต้อง ก็สามารถเริ่มหาผลรวม ของตัวเลขเหล่านั้นได้:

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>