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

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

สมมติว่ามีพารากราฟ:

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

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

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

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

elems.textContent = '!';

วิธีแก้ไขที่ถูกต้องที่นี่คือ วนลูปผ่านอาร์เรย์ขององค์ประกอบ และสำหรับแต่ละองค์ประกอบแยกกัน ดำเนินการดำเนินการที่ต้องการ:

for (let elem of elems) {
	elem.textContent = '!';
}