Cách xóa phần tử khỏi HTMLCollection

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

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

1 và

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

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

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

3

Hô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

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

Bạn muốn lấy các phần tử

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

4 để bạn có thể làm việc với chúng

Bộ sưu tập tĩnh

Phương thức

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

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

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

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

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

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ếp

Nế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 DOM

HTMLCollection[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ử

<div id="sandwiches">
	<p class="sandwich" id="tuna">Tunap>
	<p class="sandwich" id="pbj">PB&Jp>
	<p class="sandwich" id="turkey">Turkeyp>
div>

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

Làm cách nào để xóa phần tử khỏi HTMLCollection trong JavaScript?

Làm cách nào để xóa bộ sưu tập HTML khỏi DOM?

HTMLCollection có hoạt động không?

Làm cách nào để xóa phần tử HTML trong jQuery?