使用 JavaScript 的 HTMLCollection 更改事件答案

【问题标题】：HTMLCollection change event with JavaScript使用 JavaScript 的 HTMLCollection 更改事件
【发布时间】：2014-03-30 12:47:58
【问题描述】：

如果我假设正确，HTMLCollection 是动态的。

在其中自动将更改作为项目添加或从文档中删除。

有没有办法使用事件处理程序来检测 HTMLCollection 大小的变化？当然除了使用计时器不断轮询集合。

【问题讨论】：

需要支持哪些浏览器？
我不认为有这样的事件，但 MutationObserver 可能会有所帮助，developer.mozilla.org/en/docs/Web/API/MutationObserver
@Andrew 这也是我的想法。问题是它在 IE 中不起作用
跨浏览器。自然。不幸的是，哈哈。
这能回答你的问题吗？ Detect changes in the DOM

标签： javascript html dom cross-browser dom-events

【解决方案1】：

为了避免混淆，动态表示在运行时修改了某些内容。 HTMLCollection 是live，这意味着它是动态的，而且它不仅可以通过客户端脚本进行更改，还可以通过here 声明的浏览器算法进行更改。这些算法可以被MutationObserver（今天是cross-browser）拦截，下面的测试代码解释：

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，但只要按下 Add Item 按钮就会被浏览器算法修改（可以通过测试按钮）。算法被observer 对象拦截，该对象以MutationRecord 作为参数调用watch 回调。这可能很昂贵，因此需要仔细设置options，并且在不需要时应断开观察者的连接。

【讨论】：