Sự khác biệt giữa bộ sưu tập trực tiếp và không trực tiếp trong bộ chọn Javascript là gì?

Question

Làm cách nào để biết sự khác biệt giữa thu thập trực tiếp và không trực tiếp là gì.

Theo nghiên cứu của tôi:

Một sống là: khi những thay đổi trong DOM được phản ánh trong bộ sưu tập. Nội dung bị thay đổi khi một nút được sửa đổi.

A Không sống là: khi bất kỳ thay đổi nào trong DOM không ảnh hưởng đến nội dung của bộ sưu tập.

document.getElementsByClassName() là một HTMLCollection và đang hoạt động.

document.getElementsByTagName() là một HTMLCollection và đang hoạt động.

document.getElementsByName() là một NodeList và đang hoạt động.

document.querySelectorAll() là một NodeList và không hoạt động.

Tại sao document.querySelectorAll không hoạt động?

Tôi biết rằng:

HTMLCollection chỉ chứa Elements Nodes NodeList chứa phần tử nút và nút Text.

Answer 1

Những

document.getElementsByClassName() 
document.getElementsByTagName() 
document.getElementsByName() 

đang sống, vì họ là quan sát viên của các bộ sưu tập nội bộ được duy trì bởi động cơ. Việc bảo trì đó không được yêu cầu nghiêm ngặt nhưng rất dễ đạt được.

document.querySelectorAll() 

không hoạt động vì kết quả được tính mỗi khi bạn yêu cầu. Bảo trì bộ sưu tập trực tiếp quá đắt vì mỗi sửa đổi (nội dung, thuộc tính, lớp) của DOM trong trường hợp này sẽ yêu cầu đánh giá lại từng phần tử trong bộ sưu tập - O(N*M) nhiệm vụ trong đó N là số của tất cả các phần tử trong DOM (trường hợp xấu nhất) và số M hoạt động querySelectorAll() bộ sưu tập.

Answer 2

Từ DOM spec

Một bộ sưu tập là một đối tượng đại diện cho một danh sách các nút DOM. A collection có thể là sống hoặc tĩnh. Trừ khi có cách khác đã nêu, số collection phải là live.

Nếu một collection là live, sau đó các thuộc tính và phương pháp trên rằng đối tượng phải hoạt động trên các dữ liệu cơ bản thực tế, không phải là một bản chụp của dữ liệu.

Khi tạo collection, bộ lọc và gốc được liên kết với nó.

Các collection sau đó đại diện có tầm nhìn ra cây con bén rễ tại gốc 's collection, chỉ chứa các nút phù hợp với trao lọc. Khung nhìn là tuyến tính. Trong trường hợp không có yêu cầu cụ thể đối với ngược lại, các nút trong số collection phải được sắp xếp theo tree order.

Lý do để làm cho querySelectorAll trả lại giá trị tĩnh NodeList có thể cho phép nhiều bộ chọn phức tạp hơn.

Ví dụ: Bộ chọn L4 có thể giới thiệu những thứ như lớp học giả :has(). Có lẽ, vì nó không thể được thực hiện trong một hiệu suất hợp lý, nó sẽ chỉ có sẵn trong querySelectorAll nhưng không có trong bảng định kiểu.

Nếu bộ sưu tập được trả lại bởi querySelectorAll đã hoạt động, thì những bộ chọn phức tạp đó sẽ cần được tính toán lại nhiều lần và điều đó sẽ rất tốn kém.