javascript - 使用 JavaScript 的 HTMLCollection 更改事件

Question

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

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

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

Answer 1

为避免混淆，动态表示在运行时修改了某些内容。 HTMLCollection 是 直播 ，这意味着它是动态的，而且它不仅可以通过客户端脚本进行更改，还可以通过浏览器算法进行更改，如声明的 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 按钮时会被浏览器算法修改(可以通过 Test 按钮验证)。算法被 observer拦截调用 watch 的对象回调 MutationRecord作为它的论据。这可能很昂贵，所以 options需要仔细设置，不需要时断开观察器。