Phương thức item[] được sử dụng để trả về nội dung của phần tử tại chỉ mục đã cho của tập hợp tất cả các phần tử HTML. Chỉ số bắt đầu từ số không [0]. Các phần tử trong bộ sưu tập được sắp xếp theo thứ tự khi chúng xuất hiện trong mã nguồn.
cú pháp
HTMLCollection.item[index]
HOẶC
HTMLCollection[index]
Thông số. Nó chứa một số đại diện cho chỉ mục của phần tử mà người dùng muốn trả về. Chỉ số bắt đầu từ 0
Tuna
PB&J
Turkey
1 và
Tuna
PB&J
Turkey
2 là hai loại bộ sưu tập đối tượng giống như mảng. Chúng hoạt động tương tự nhau, với một vài điểm khác biệt đáng chú ý và cả hai đều có thể được lặp lại bằng vòng lặp
Tuna
PB&J
Turkey
3Hôm nay, tôi muốn nói về sự khác biệt giữa tập hợp các nút DOM tĩnh và trực tiếp trong JavaScript. Nào cùng đào vào bên trong
[Tại sao có quá nhiều bộ sưu tập các thứ giống như mảng khác nhau trong JavaScript là một bài viết khác cho một ngày khác. ]
HTML mẫu
Hãy tưởng tượng bạn có một số HTML trông như thế này
Tuna
PB&J
Turkey
Bạn muốn lấy các phần tử
Tuna
PB&J
Turkey
4 để bạn có thể làm việc với chúngBộ sưu tập tĩnh
Phương thức
Tuna
PB&J
Turkey
5 trả về một bộ sưu tập tĩnh// A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
0 mà bạn quay lại không bao giờ thay đổi, ngay cả khi các phần tử HTML bên trong bộ sưu tập không còn phản ánh bộ chọn mà bạn đã sử dụng khi chạy nó lần đầu tiên// A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
Giả sử bạn đã sử dụng phương thức
// A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
1 để xóa phương thức
Tuna
PB&J
Turkey
4 khỏi phần tử // A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
3// Remove the .sandwich class from #pbj
let pbj = document.querySelector['#pbj'];
pbj.classList.remove['.sandwich'];
// A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
0 được gán cho biến // A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
5 vẫn chứa phần tử // A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
3, mặc dù nó không còn lớp
Tuna
PB&J
Turkey
4Đó là một bộ sưu tập tĩnh, vì vậy nó không thay đổi, ngay cả khi DOM thay đổi
Đây là một bản demo
Bộ sưu tập trực tiếp
Ngược lại, cả phương thức
// A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
8 và thuộc tính // A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
9 đều trả về một tập hợp trực tiếpNếu bạn gán
// Remove the .sandwich class from #pbj
let pbj = document.querySelector['#pbj'];
pbj.classList.remove['.sandwich'];
0 được trả về cho một biến và DOM thay đổi sau đó, thì // Remove the .sandwich class from #pbj
let pbj = document.querySelector['#pbj'];
pbj.classList.remove['.sandwich'];
0 sẽ tự động cập nhật để phù hợp với trạng thái hiện tại của DOMHTMLCollection[index]5
Nếu bạn xóa phần tử
// A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
3 khỏi DOM bằng phương thức // Remove the .sandwich class from #pbj
let pbj = document.querySelector['#pbj'];
pbj.classList.remove['.sandwich'];
3, thì phần tử // Remove the .sandwich class from #pbj
let pbj = document.querySelector['#pbj'];
pbj.classList.remove['.sandwich'];
0 được gán cho // A NodeList with the three .sandwich elements
let sandwiches = document.querySelectorAll['.sandwich'];
5 sẽ chỉ chứa hai phần tử
Tuna
PB&J
Turkey
0Đây là một bản demo khác
Loại bộ sưu tập nào tốt hơn?
nó phụ thuộc
Thông thường, có một danh sách cố định là một điều tốt. Nhưng đôi khi bạn có thể muốn một danh sách tự động cập nhật để phản ánh giao diện người dùng hiện tại
Hiểu được liệu phương thức bộ chọn của bạn trả về một bộ sưu tập tĩnh hay trực tiếp cũng có thể giúp ngăn ngừa các tác dụng phụ và lỗi ngoài ý muốn