Thông tin về từng chi tiết phương pháp nếu nó đang hoạt động hay không, nhưng dường như không có quy ước chuẩn để xác định nó.
document.getElementsByClassName() là HTMLCollection và đang phát trực tiếp.
document.getElementsByTagName() là HTMLCollection và đang phát trực tiếp.
document.getElementsByName() là NodeList và hoạt động.
document.querySelectorAll() là NodeList và là không hoạt động.
HTMLCollection s dường như luôn sống
Một HTMLCollection là danh sách các nút. Một nút riêng lẻ có thể là được truy cập bởi chỉ mục thứ tự hoặc thuộc tính hoặc tên của nút.
Lưu ý: Các bộ sưu tập trong DOM HTML được giả định là trực tiếp có nghĩa là chúng sẽ tự động được cập nhật khi tài liệu cơ bản là thay đổi.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506
Vì vậy, HTML Bộ sưu tập là luôn "trong dom," trong khi một nodeList là một cấu trúc chung chung hơn có thể có hoặc không có thể trong DOM.
Đối tượng NodeList là tập hợp các nút ... Giao diện NodeList cung cấp sự trừu tượng hóa bộ sưu tập các nút của được sắp xếp, mà không cần xác định hoặc hạn chế cách thực hiện bộ sưu tập này. Các đối tượng NodeList trong DOM là trực tiếp.
http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live
Âm thanh tốt, phải không?
Bộ sưu tập là đối tượng đại diện cho danh sách các nút DOM. Bộ sưu tập có thể là trực tiếp hoặc tĩnh. Trừ khi có quy định khác, bộ sưu tập phải hoạt động.
http://www.w3.org/TR/2012/WD-dom-20120405/#collections
bộ sưu tập So tĩnh sẽ được chỉ ra như vậy trong spec. Vì vậy, theo logic này, document.querySelectorAll() là một bộ sưu tập, nhưng nó là không phải là trong DOM. Bởi vì trong khi các bộ sưu tập có thể hoặc không thể phát trực tiếp, các bộ sưu tập trong DOM phải đang hoạt động ... Sự khác biệt này không phải là siêu hữu ích.
Vâng, đây là một phương pháp nhanh để xác định xem collection có hoạt động hay không; nó gắn thêm một bản sao của một thành viên của bộ sưu tập đến DOM (vì vậy nó sẽ phù hợp với selector), và kiểm tra xem nếu độ dài thay đổi, và sau đó loại bỏ nó (vì vậy trang không bị ảnh hưởng)
function isLive(collection) {
if (collection.length < 1) {
return undefined; //inconclusivw
}
let body = document.getElementsByTagName('body')[0];
let l1 = collection.length;
let clone = collection.item(0).cloneNode();
clone.style.display = "none";
body.appendChild(clone);
let l2 = collection.length;
body.removeChild(clone);
return l2 !== l1;
}
DEMO
HTML
<html><body>
<div class="c" name="mydiv">C1</div>
<div class="c" name="mydiv">C2</div>
</body></html>
JS
divs1=document.getElementsByClassName('c');
console.log(divs1.toString());//"[object HTMLCollection]"
divs2=document.querySelectorAll('.c');
console.log(divs2.toString());//"[object NodeList]"
divs3=document.getElementsByName('mydiv');
console.log(divs3.toString());//"[object NodeList"]
console.log(isLive(divs1));//true
console.log(isLive(divs2));//false
console.log(isLive(divs3));//true
Kiểm tra [NodeList.js] (https://github.com/eorroe/NodeList.js) –