Confused About MutationObserver

Question

Quindi mi è venuto in mente di usare il MutationObserver e non ho fatto alcun progresso. Ho letto su di esso sul sito W3C e nel MDN. Durante la lettura in MDN, tutto aveva senso fino all'esempio.

// select the target node 
var target = document.querySelector('#some-id'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation.type); 
    }); 
}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true }; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

// later, you can stop observing 
observer.disconnect(); 

La parte che sto avendo più problemi con sta creando l'istanza dell'osservatore, non è che la sintassi di ciò che appartiene lì. Anche nella console ho ricevuto un errore "TypeError: Value non implementa il nodo di interfaccia". Non importa quali esempi ho visto e provato a usare; sostituendo i selettori nell'esempio con i selettori jQuery desiderati (anche i selettori non jQ hanno restituito lo stesso problema).

Answer 1

in primo luogo non si dovrebbero usare selettori jQ perché non sono elementi del nodo. in secondo luogo, devi essere sicuro che il selettore di query non restituisce nulla. Per essere sicuri di provare per la prima volta l'osservatore su document.body: è sicuramente un oggetto Node. Qualcosa come

(
    new MutationObserver(function(mutationEventList){ 
     console.log(mutationEventList) 
    }) 
) 
.observe(document.body, { 
    childList: true, 
    attributes: true, 
    characterData: true 
}) 

Quando si otterrà familiarità con l'obiettivo di un'osservatore e capire MutationObserverInit valori delle opzioni (che sono descritti non come buono come potrebbe) si sarà in grado di lavorare con mutationObserver destra.