Me gustaría usar un objeto MutationObserver para observar cambios en algunos de mis nodos DOM.
Los documentos dan un ejemplo de cómo crear un objeto MutationObserver y registrarlo en un objetivo.
// 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);Digamos que tengo el código de arriba, pero justo debajo, coloco este código:
var target2 = document.querySelector('#some-other-id'); var config2 = {attributes: true, subtree: true}; observer.observe(target2, config2); Will observer :
target ?target2 ?El observador ahora observará dos objetivos: target y target2 según sus definiciones. No se arrojará ningún error, y target no será "desregistrado" a favor de target2 . No se exhibirán comportamientos inesperados o de otro tipo.
Aquí hay una muestra que usa el mismo MutationObserver en dos elementos editables. Para ver esto, elimine el nodo <span> de cada elemento contenteditable y vea el intervalo de comportamiento en ambos elementos observados.
<div id="myTextArea" contenteditable="true"> <span contenteditable="false">Span A</span> </div> <div id="myTextArea2" contenteditable="true"> <span contenteditable="false">Span B</span> </div> var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { //console.log($(mutation.removedNodes)); // <<-- includes text nodes $(mutation.removedNodes).each(function(value, index) { if(this.nodeType === 1) { console.log(this) } }); }); }); var config = { attributes: true, childList: true, characterData: true }; observer.observe($('#myTextArea')[0], config); observer.observe($('#myTextArea2')[0], config);Enlace JSFiddle - demostración
Tenga en cuenta que he reciclado la misma configuración para esta primera demostración, pero colocar una nueva configuración será exclusivo para ese elemento observado. Tomando su ejemplo como se define en config2 , si se usa en #myTextArea2 , no verá el nodo registrado según las opciones de configuración, pero observe que el observador de #myTextArea no se ve afectado.
JSFiddle Link - demo - exclusividad de configuración