ข้อผิดพลาดในการรับองค์ประกอบใน JavaScript

บางครั้งโปรแกรมเมอร์มือใหม่ทำผิดพลาด โดยใช้วิธีการ querySelector แทนที่วิธีการ querySelectorAll ในการรับกลุ่มองค์ประกอบ DOM

ลองมาดูลักษณะเฉพาะ ของข้อผิดพลาดนี้กัน สมมติว่า มีย่อหน้าเหล่านี้:

<p>1</p>
<p>2</p>
<p>3</p>

โปรแกรมเมอร์บางคนตัดสินใจรับ และแสดงข้อความของย่อหน้าเหล่านี้ ในคอนโซล สำหรับสิ่งนี้เขาได้รับลิงก์ไปยัง องค์ประกอบเหล่านี้ในตัวแปร โดยใช้วิธีการผิดพลาด:

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

จากนั้นเขาตัดสินใจที่จะวนลูปผ่านย่อหน้า และแสดงข้อความของแต่ละย่อหน้า ในคอนโซล:

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

ผลลัพธ์ที่ได้คือจะปรากฏข้อผิดพลาดลักษณะเฉพาะ ในคอนโซล elems is not iterable มันบอกว่า ตัวแปร elems ไม่สามารถ ทำซ้ำได้, นั่นคือไม่ใช่อาร์เรย์หรือบางสิ่ง ที่สามารถวนลูปผ่านด้วยลูป for-of ได้