Lỗi Lấy Phần Tử trong JavaScript

Đôi khi các lập trình viên mới bắt đầu mắc lỗi khi sử dụng phương thức querySelectorAll thay vì phương thức querySelector để lấy một phần tử DOM.

Hãy cùng xem xét các đặc điểm đặc trưng của lỗi này. Giả sử có một đoạn văn:

<p>văn bản</p>

Một lập trình viên nào đó quyết định lấy và thay đổi văn bản của đoạn văn này. Để làm điều đó, anh ta đã lấy liên kết đến phần tử này vào một biến, nhưng đã sử dụng sai phương thức một cách sai lầm:

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

Sau đó, lập trình viên cố gắng thay đổi văn bản của đoạn văn. Tuy nhiên, văn bản của đoạn văn không thay đổi:

elem.textContent = '!!!'; // không hoạt động

Trong trường hợp này, không có lỗi nào xuất hiện trong console. Vấn đề là một thao tác hợp lệ đã được thực hiện, nhưng không phải trên một phần tử, mà trên một nhóm. Và việc đọc hoặc thay đổi văn bản của một nhóm các phần tử đơn giản là không thể - chỉ có thể bằng cách duyệt qua chúng bằng vòng lặp và truy cập từng phần tử riêng lẻ.

Cách Phát Hiện Lỗi

Hãy cùng xem, một lập trình viên nên hành động như thế nào để phát hiện lỗi này. Trên thực tế, với một chút kinh nghiệm, lỗi này rất dễ phát hiện bởi các dấu hiệu đặc trưng.

Giả sử điều đó, tuy nhiên, đã không xảy ra. Khi đó hành động đầu tiên của lập trình viên khi tìm lỗi nên là in giá trị của các biến ra console. Trong trường hợp của anh ta chỉ có một biến - elem. Cần in giá trị của biến này và xem trong nó chứa gì:

let elem = document.querySelectorAll('p');
console.log(elem); // sẽ in ra một mảng, không phải một phần tử

Trong console, có thể thấy ngay rằng trong biến không phải là một phần tử, mà là một mảng. Điều này ngay lập tức cung cấp một gợi ý rõ ràng rằng đã mắc phải lỗi trong phương thức lấy phần tử.