Làm thế nào để bạn có được các yếu tố từ một HTMLCollection javascript

Question

Tôi không thể hiểu tại sao tôi không thể lấy các phần tử từ một HtmlCollection. Mã này ví dụ:

var col = (document.getElementsByClassName("jcrop-holder")); 
console.log(col); 

sản xuất sản lượng này trên console:

Tôi đang cố gắng để có được những đối tượng dic.jcrop-giữ nhưng tôi không thể có được nó từ col biến tôi. Không có tác phẩm nào trong số này hoạt động:

console.log(col[0]); // undefined 
    console.log(col.item(0)); // null 

    // check length of collection 

    console.log(col.length); // 0 

Vì vậy, nếu độ dài bằng 0 tại sao bảng điều khiển hiển thị độ dài 1, cũng như các đối tượng bên trong? Khi tôi mở nút, nó chứa trẻ em. Chuyện gì vậy?

Dưới đây là một số nút được mở rộng. Tôi đã không mở rộng div.jcrop.holder vì nó quá dài. Dưới đây là trẻ em yếu tố:

Answer 1

tôi đã phải đối mặt với cùng một vấn đề và giải pháp cho vấn đề này là để đặt kịch bản của tôi trong phần cuối của tài liệu, để chờ đợi để toàn bộ tài liệu được nạp trước bắt đầu thay đổi hoặc chọn các phần tử HTMLCollection. Hy vọng điều đó sẽ hữu ích.

Answer 2

Trích từ: Can't access the value of HTMLCollection

Vấn đề là bạn đã đặt kịch bản trong tiêu đề đó được thực hiện trước khi các yếu tố html được nạp, vì vậy getElementsByClassName() sẽ không trả lại bất kỳ yếu tố.

Một giải pháp là chờ đợi cho các yếu tố html được nạp sau đó thực hiện kịch bản của bạn, cho rằng bạn có thể sử dụng cửa sổ đối tượng sự kiện tải

window.addEventListener('load', function() { 
var eles = document.getElementsByClassName('review'); 
console.log(eles); 
console.log(eles.length); 
console.log(eles[0]); 
}) 

Hoặc bạn có thể đặt kịch bản của bạn ở dưới cùng của cơ thể thay vì ở đầu để cho đến khi tập lệnh được phân tích cú pháp và thực hiện các phần tử được tải trong dom