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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

กำหนดลิสต์รายการปี:

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

ให้ดึงปีที่มีผลรวมของเลขโดด เท่ากับ 6 ค้นหาผลรวมของปี ที่ได้นั้น