使用 JavaScript 的 HTMLCollection 更改事件

Question

如果我假設正確，HTMLCollection 是動態的。

其中更改作為項目自動添加或從文檔中刪除。

有沒有辦法使用事件處理程序檢測 HTMLCollection 大小的變化？ 當然，除了使用計時器不斷輪詢集合之外。

Answer 1

為了避免混淆，動態意味着在運行時修改了某些內容。 HTMLCollection 是實時的，這意味着它是動態的，而且它不僅可以通過客戶端腳本進行更改，還可以通過此處聲明的瀏覽器算法進行更改。 這些算法可以被MutationObserver （今天是跨瀏覽器）攔截，下面的測試代碼解釋：

 function addItem() { var li = document.createElement("li"); li.innerHTML = "item"; list.appendChild(li); } var data = list.children; function watch(data) { console.log(data); } var observer = new MutationObserver(watch); observer.observe(list, {childList: true});

 <ul id="list"></ul> <button onclick="addItem()">Add item</button> <button onclick="console.log(data.length)">Test</button>

這里的data是在加載階段（在 DOMContentLoaded 觸發之前）創建的實時 HTMLCollection，但在按下“添加項目”按鈕時由瀏覽器算法修改（可以通過“測試”按鈕進行驗證）。 算法被observer對象攔截， observer對象以MutationRecord作為參數調用watch回調。 這可能很昂貴，因此需要仔細設置選項，並且在不需要時應斷開觀察者的連接。