使用 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回调。 这可能很昂贵，因此需要仔细设置选项，并且在不需要时应断开观察者的连接。