Using client javascript to monitor new elements added to document

Question

i was using Object.observe() a few months ago to monitor any recursive changes from window.document. Now O.o() is withdrawn from em6+, i need to customize this behavior. I need access to new elements created anywhere in the document.

I've tried These Projects (works, but without child recursion):

https://github.com/MaxArt2501/object-observe

https://github.com/jdarling/Object.observe

https://github.com/jdarling/Object.observe

I read from the Mozilla MDN to use proxy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy I'm not sure which trap to use, or how to make this recursive.

Here is the exact code i've been using with O.o() :

                    var observer = new MutationObserver(function (mutations) {
                        mutations.forEach(function (mutation) {
                                console.log("Observed Mutation:");
                                //mutation.target
                                //mutation.type
                                //mutation.oldValue
                                //mutation.attributeName
                                //mutation.attributeNamespace
                                //mutation.removedNodes
                                //mutation.addedNodes
                        });
                    });

                    //mutation observer configuration
                    var config = {
                        childList: true,
                        attributes: true,
                        characterData: true,
                        subtree: true,
                        attributeOldValue: true,
                        characterDataOldValue: true
                        attributeFilter: false
                    };

                    // pass in the target node and options to mutation observer
                    observer.observe(document, config);

What is the minimal amount of code that will give me access to newly created objects with or without using a polyfill?

Answer 1

Found the answer through irc.freenode.net ##javascript from: jaawerth

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