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

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

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

<p>text</p>

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

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

จากนั้นโปรแกรมเมอร์ก็พยายามเปลี่ยน ข้อความของย่อหน้า อย่างไรก็ตาม ข้อความของย่อหน้าไม่เปลี่ยนแปลง:

elem.textContent = '!!!'; // ไม่ทำงาน

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

วิธีตรวจจับข้อผิดพลาด

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

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

let elem = document.querySelectorAll('p');
console.log(elem); // จะแสดงอาร์เรย์ ไม่ใช่องค์ประกอบเดียว

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