jak zachytit změnu DOM pomocí PURE JS

Ano. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Díky za tip.

Mám to takto

<ul id="prehled">
<li>Počet jahod:40000</li>
<li>Počet pomerančů:36000</li>
</ul>

var target = document.querySelector('#prehled');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);
observer.disconnect();

Pokud změním javascriptem v li (Počet jahod) hodnotu ze 40000 třeba na 200, tak se nic neděje? Co je prosím špatně? Díky

Protože tam máš ten disconnect.

Tak se s tím pořád trápím :( Nevíš prosím tě co s tím je?
Dostávám chybu : Uncaught TypeError: Cannot read property 'disconnect' of undefined at MutationObserver.disconnect

class Zmeny{
        start(){
                var target= document.querySelector('#prehled');
                var options= { childList:true, attributes:true, subtree:true};
                this.observer= new MutationObserver(this.stop);
                this.observer.observe(target, options);
        }

        stop(){
                this.observer.disconnect();
        }
}

Jaký má být smysl tohohle řádku?

this.observer= new MutationObserver(this.stop);

No jestli jsem to pochopil, tak pokud se něco změní, tak se spustí callback / funkce stop().
Nebo ne?

No právě. Jaký to má smysl? Sledovat změny a když nějaká nastane, tak s tím sledováním přestat. Ale výsledek nikde nepoužít.
Jinak problém je v tom, že v tom callbacku se this vztahuje na ten observer.

No právě. Jaký to má smysl? Sledovat změny a když nějaká nastane, tak s tím sledováním přestat.

Přesně tak bych to potřeboval, změna nastala tudíž o tom vím a nepotřebuji to nadále hlídat.

Ale výsledek nikde nepoužít.

Jaký výsledek? Jako co se změnilo? To zatím nepotřebuji.

this vztahuje na ten observer.

Tak že to ve třídě nejde použít?

Zkoušel jsem to i takto, ale taky to nejde..

class Zmeny{
        start(){
                var target= document.querySelector('#categories');
                var options= { childList:true, attributes:true, subtree:true};
                var observer= new MutationObserver(stop(observer));
                observer.observe(target, options);
        }

        stop(observer){
                observer.disconnect();
        }
}

Proč se nepoučíš z předchozích dotazů?

this.observer = new MutationObserver(this.stop.bind(this));

Učím, to jsem taky zkoušel, výsledek stejný :(

Zvláštní, že mně to funguje.

A máš to takto?

class Zmeny{
        start(){
                var target= document.querySelector('#prehled');
                var options= { childList:true, attributes:true, subtree:true};
                this.observer= new MutationObserver(this.stop.bind(this));
                this.observer.observe(target, options);
        }

        stop(){
                this.observer.disconnect();
        }
}

Ano.

Hm, tak to mě vážně nefunguje :(

co u mě funguje je tohle

class Zmeny{
        start(){
                var target= document.querySelector('#prehled');
                var options= { childList:true, attributes:true, subtree:true};
                var observer= new MutationObserver(stop);
                observer.observe(target, options);
        }

        function stop(){
                observer.disconnect();
        }
}

BTW: a když budu chtít hlídat více těch hodnot v různých seznamech tak to mám napsat pro každý ten UL samostatně?

Je potřeba pro každý zavolat observe().

OK, díky moc. Já jdu přeinstalovat Windows, těch problémů je už nějak moc :(

Silně pochybuju, že si tím pomůžeš.

No něčím to být musí.. Ne?

Možno behovým prostredím (Prehliadač (doplnkom prehliadača), Electron, či iné). Snaď funkčnosť netestujete v Internet Explorery.

Můžu pomocí toho scriptu hlídat i změnu objektu nebo pole?

Ne.

A nějaký jiný způsob znáš?

Tak snad sám víš, co si v datech měníš, ne?

Tak reinstall pomohl, otázkou ale je, co bylo ve finále opravdu špatně. Neřeším to, reinstalace trvá pomocí ATI cca 15minut ;)

Spíš jsi měl v cache prohlížeče načtenou starší verzi skriptu. Ale když to neřešíš, tak je to jedno.