How to observe an HTMLCollection?

Question

A little curious since I know that HTMLCollections update themselves automatically, I tried observing them by using a Proxy as shown below


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'>"
);

but when trying to add dynamically some images, nothing happen ...

So my questions are :

Is that even possible ?
If yes, Am I doing it wrong ?

What about using a [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)? — evolutionxbox, Jun 12 '21 at 11:08
It may not be exactly what you're looking or. What are you trying to solve by observing a collection? — evolutionxbox, Jun 12 '21 at 11:24
@evolutionxbox, yeah, [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) do help react with the added element but not with the collection — , Jun 12 '21 at 11:25
i am just looking for a better solution for the lazy-loading of my images and the idea of observation of collections is only intended to satisfy my curiosity since it reduces the field of research and delete the loops found in the MutationObserver's callback — , Jun 12 '21 at 11:34

score 0 · Accepted Answer · answered Jun 12 '21 at 12:32

0

If I understand correctly, proxies intercept operations with proxies, not with targets:

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.';

So in your case, operations with io are intercepted, while operations with imagesCollection or document.images are not.

So mutation observer is a better option.

answered Jun 12 '21 at 12:32

vsemozhebuty

12,992
1
26
26

Ooooh, thanks. Your explanation makes my understanding of proxies more clearer. Only the proxies are observed, not the targets. So would it be impossible to directly observe the Collections? --- Ps: I already know how to observe elements on the DOM by using MutationObserver – Jun 12 '21 at 15:20
@ntdash Sorry, I cannot think of any way to directly observe Collections. Maybe someone else has) – vsemozhebuty Jun 12 '21 at 15:31
@ntdash Some similar questions seem unanswered: https://stackoverflow.com/questions/22062602/htmlcollection-change-event-with-javascript or https://stackoverflow.com/questions/55046093/listening-for-changes-in-htmlcollection-or-achieving-a-similar-effect – vsemozhebuty Jun 12 '21 at 15:37
Wooo , they were looking for the same things XD. Last question then : Is the MutationObserver needy in terms of memory or cpu ? – Jun 12 '21 at 15:52
@ntdash Sorry, I do not know. Maybe it is worth a separate question) – vsemozhebuty Jun 12 '21 at 16:01
I see ... Thanks anyway. You made me less stupid. XD ... – Jun 12 '21 at 16:14

How to observe an HTMLCollection?

1 Answers1