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, sử dụng phương thức querySelector để lấy một nhóm phần tử DOM thay vì phương thức querySelectorAll.

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

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

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

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

Sau đó, anh ta quyết định lặp qua các đoạn văn bằng vòng lặp và in nội dung văn bản của từng đoạn văn ra console:

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

Kết quả là trong console sẽ xuất hiện lỗi đặc trưng elems is not iterable. Lỗi này nói rằng biến elems không phải là iterable, tức là không phải là một mảng hoặc thứ gì đó có thể lặp qua bằng vòng lặp for-of.