使用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对象拦截，该对象watch以MutationRecord作为参数调用回调。这可能会很昂贵，因此需要仔细设置选项，并且在不需要时应断开观察者的连接。