Lỗi Thao Tác Với Mảng Các Phần Tử Trong JavaScript

Đôi khi các lập trình viên mới bắt đầu cố gắng làm việc với một mảng các phần tử như thể họ chỉ có một phần tử duy nhất. Hãy cùng xem bản chất của lỗi này là gì.

Giả sử cho trước các đoạn văn:

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

Giả sử một lập trình viên nào đó quyết định ghi vào văn bản của mỗi đoạn văn một giá trị giống nhau. Để làm điều này, họ đã lấy các tham chiếu đến các phần tử này vào một biến:

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

Sau đó, lập trình viên của chúng ta đã mắc lỗi khi truy cập vào biến của chúng ta như thể trong đó chứa một phần tử duy nhất, chứ không phải một mảng. Kết quả là văn bản của các đoạn văn sẽ không thay đổi, nhưng, điều đặc trưng là, cũng không có lỗi nào trong console:

elems.textContent = '!';

Giải pháp đúng ở đây sẽ là duyệt qua mảng các phần tử bằng vòng lặp và đối với từng phần tử riêng biệt thực hiện thao tác cần thiết:

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