programming html

Bộ sưu tập HTML

Để trả lời câu hỏi ban đầu, bạn đang sử dụng sai

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

9. Trong mã của bạn,

var list = document.getElementsByClassName["events"];
for [let item of list] {
    console.log[item.id];
}

0 là chỉ số. Vì vậy, để lấy giá trị từ mảng giả, bạn phải thực hiện

var list = document.getElementsByClassName["events"];
for [let item of list] {
    console.log[item.id];
}

1 và để lấy id, bạn phải thực hiện

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

0. Tuy nhiên, ngay từ đầu bạn không nên làm điều này với

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Tóm tắt [được thêm vào tháng 12 năm 2018]

Đừng bao giờ sử dụng

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

9 để lặp lại một nodeList hoặc một HTMLCollection. Những lý do để tránh nó được mô tả dưới đây

Tất cả các phiên bản gần đây của trình duyệt hiện đại [Safari, Firefox, Chrome, Edge] đều hỗ trợ lặp lại

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

3 trên danh sách DOM chẳng hạn như

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

4 hoặc

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Đây là một ví dụ

var list = document.getElementsByClassName["events"];
for [let item of list] {
    console.log[item.id];
}

Để bao gồm các trình duyệt cũ hơn [bao gồm cả những thứ như IE], điều này sẽ hoạt động ở mọi nơi

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Giải thích lý do tại sao bạn không nên sử dụng

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

9 có nghĩa là để lặp lại các thuộc tính của một đối tượng. Điều đó có nghĩa là nó sẽ trả về tất cả các thuộc tính có thể lặp lại của một đối tượng. Mặc dù nó có vẻ hoạt động đối với một mảng [trả về các phần tử mảng hoặc phần tử giả mảng], nhưng nó cũng có thể trả về các thuộc tính khác của đối tượng không phải là những gì bạn đang mong đợi từ các phần tử giống như mảng. Và, hãy đoán xem, một đối tượng

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

5 hoặc

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

4 có thể có các thuộc tính khác sẽ được trả về với lần lặp

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

9. Tôi vừa thử điều này trong Chrome và lặp lại nó theo cách bạn đang lặp lại, nó sẽ truy xuất các mục trong danh sách [chỉ mục 0, 1, 2, v.v. ], nhưng cũng sẽ truy xuất các thuộc tính

0
1
2
item
namedItem
@@iterator
length

1 và

0
1
2
item
namedItem
@@iterator
length

2. Phép lặp

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

9 đơn giản là không hoạt động đối với HTMLCollection

xem http. //jsfiddle. net/jfriend00/FzZ2H/ để biết lý do tại sao bạn không thể lặp lại một HTMLCollection với

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Trong Firefox, phép lặp

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

9 của bạn sẽ trả về các mục này [tất cả các thuộc tính có thể lặp của đối tượng]

________số 8

Hy vọng rằng, bây giờ bạn có thể hiểu tại sao bạn muốn sử dụng

0
1
2
item
namedItem
@@iterator
length

6 thay vì vậy bạn chỉ nhận được

0
1
2
item
namedItem
@@iterator
length

0
1
2
item
namedItem
@@iterator
length

8 và

0
1
2
item
namedItem
@@iterator
length

9 trong lần lặp lại của mình

Sự phát triển của hỗ trợ trình duyệt cho lần lặp NodeList và HTMLCollection

Sau đây là sự phát triển về cách các trình duyệt đã phát triển trong khoảng thời gian 2015-2018 cung cấp cho bạn các cách bổ sung để lặp lại. Không cái nào trong số này hiện cần thiết trong các trình duyệt hiện đại vì bạn có thể sử dụng các tùy chọn được mô tả ở trên

Cập nhật cho ES6 năm 2015

Đã thêm vào ES6 là

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

50 sẽ chuyển đổi cấu trúc giống như mảng thành một mảng thực tế. Điều đó cho phép một người liệt kê một danh sách trực tiếp như thế này

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Bản demo hoạt động [trong Firefox, Chrome và Edge kể từ tháng 4 năm 2016]. https. //jsfiddle. net/jfriend00/8ar4xn2s/

Cập nhật cho ES6 năm 2016

Bây giờ bạn có thể sử dụng cấu trúc for/of ES6 với một

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

51 và một

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

5 bằng cách chỉ cần thêm phần này vào mã của bạn

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Sau đó, bạn có thể làm

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Điều này hoạt động trong phiên bản hiện tại của Chrome, Firefox và Edge. Điều này hoạt động vì nó gắn Trình lặp mảng vào cả nguyên mẫu NodeList và HTMLCollection để khi for/of lặp lại chúng, nó sử dụng Trình lặp mảng để lặp lại chúng

bản demo làm việc. http. //jsfiddle. net/jfriend00/joy06u4e/

Bản cập nhật thứ hai cho ES6 vào tháng 12 năm 2016

Kể từ tháng 12 năm 2016, hỗ trợ

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

53 đã được tích hợp sẵn cho Chrome v54 và Firefox v50 nên mã bên dưới tự hoạt động. Nó chưa được tích hợp sẵn cho Edge

var list = document.getElementsByClassName["events"];
for [let item of list] {
    console.log[item.id];
}

Bản trình diễn hoạt động [trong Chrome và Firefox]. http. //jsfiddle. net/jfriend00/3ddpz8sp/

Bản cập nhật thứ ba cho ES6 vào tháng 12 năm 2017

kể từ tháng 12. 2017, khả năng này hoạt động trong Edge 41. 16299. 15. 0 cho một

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

4 như trong

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

55, nhưng không phải là một

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

5 như trong

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

57, vì vậy bạn phải chỉ định thủ công trình vòng lặp để sử dụng nó trong Edge cho một

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

5. Đó là một bí ẩn hoàn toàn tại sao họ sửa một loại bộ sưu tập mà không sửa loại kia. Tuy nhiên, ít nhất bạn có thể sử dụng kết quả của

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

55 với cú pháp ES6

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

3 trong các phiên bản Edge hiện tại

Tôi cũng đã cập nhật jsFiddle ở trên để nó kiểm tra riêng cả

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

5 và

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

4 và ghi lại kết quả đầu ra trong chính jsFiddle

Bản cập nhật thứ tư cho ES6 vào tháng 3 năm 2018

Theo mesqueeeb, hỗ trợ

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

53 cũng đã được tích hợp sẵn trong Safari, vì vậy bạn có thể sử dụng

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

94 cho

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

57 hoặc

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

Bản cập nhật thứ năm cho ES6 vào tháng 4 năm 2018

Rõ ràng, hỗ trợ lặp lại một

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

5 với

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

3 sẽ đến với Edge 18 vào mùa thu năm 2018

Bản cập nhật thứ sáu cho ES6 vào tháng 11 năm 2018

Tôi có thể xác nhận rằng với Microsoft Edge v18 [được bao gồm trong Bản cập nhật Windows mùa thu 2018], giờ đây bạn có thể lặp lại cả HTMLCollection và NodeList với for/of trong Edge

Vì vậy, bây giờ tất cả các trình duyệt hiện đại đều có hỗ trợ riêng cho phép lặp

var list = document.getElementsByClassName["events"];
for [var i = 0; i < list.length; i++] {
    console.log[list[i].id]; //second console output
}

3 của cả hai đối tượng HTMLCollection và NodeList

Bộ sưu tập HTML là gì?

Một HTMLCollection là danh sách các nút . Một nút riêng lẻ có thể được truy cập bằng chỉ mục thứ tự hoặc thuộc tính id hoặc tên của nút. Ghi chú. Các bộ sưu tập trong HTML DOM được giả định là đang hoạt động, nghĩa là chúng được cập nhật tự động khi tài liệu cơ bản bị thay đổi.

Điều gì trả về một bộ sưu tập HTML?

Phương thức item[] trả về một phần tử được đánh số từ một HTMLCollection. Trong JavaScript, việc coi HTMLCollection là một mảng sẽ dễ dàng hơn và lập chỉ mục cho nó bằng cách sử dụng ký hiệu mảng.

Bộ sưu tập trong DOM là gì?

Bộ sưu tập biểu mẫu DOM được dùng để trả về tập hợp tất cả các phần tử . Các phần tử biểu mẫu được sắp xếp khi chúng xuất hiện trong mã nguồn. cú pháp. tài liệu. các hình thức. Tính chất. Nó trả về số biểu mẫu trong tập hợp các phần tử.

Bạn có thể sử dụng forEach trên bộ sưu tập HTML không?

forEach[], chúng ta có thể biến HTMLCollection thành Array, sau đó gọi phương thức trên đó

Bộ sưu tập HTML là gì?

Điều gì trả về một bộ sưu tập HTML?

Bộ sưu tập trong DOM là gì?

Bạn có thể sử dụng forEach trên bộ sưu tập HTML không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề