如何观察HTMLCollection？

Question

我有点好奇，因为我知道HTMLCollections会自动更新自己，所以我尝试使用代理来观察它们，如下所示

let imagesCollection = document.images;

let io = new Proxy(imagesCollection, {
    set: (target, prop, value, reciever) => {
        // do stuff
        // apply default behaviour
        return Reflect.set(target, prop, value);
    }
});

// test the block by adding new elements

document.body.insertAdjacentHTML("beforeend", "<img>");
document.body.insertAdjacentHTML("beforeend", "<img class='img'>");
document.body.insertAdjacentHTML(
    "beforeend",
    "<img class='img' src='https://picsum.photos/200/300'>"
);

但是当试图动态添加一些图像时，什么都不会发生.

所以我的问题是：

• 这可能吗？
• 如果是，我是不是做错了？

Answer 1

如果我正确理解，代理会用代理来拦截操作，而不是使用目标：

​

let target = {};

let proxy = new Proxy(target, {
    set: (target, prop, value, reciever) => {
        console.log(prop, value);
        return Reflect.set(target, prop, value);
    }
});

target.foo = 'I am not intercepted.';
proxy.bar = 'I am intercepted.';

​

因此，在您的示例中，使用io的操作将被拦截，而使用imagesCollection或document.images的操作则不会被截获。

所以变异观察者是一个更好的选择。