Lo que estoy tratando de hacer aquí es resaltar algunos nodos de texto convirtiéndolos en un elemento de "intervalo". Y también me gustaría que funcionara en los nodos recién agregados cuando se cargan nuevos mensajes/comentarios. Sin embargo, descubrí que MutationObserver sigue encontrando un nodo recién agregado. Tal vez sea porque doSomething crea un nuevo nodo y MutationObserver lo redescubrirá. ¿Cómo evito que esto suceda? No estoy seguro de si debería poner MutationObserver dentro de EventListener, pero parece que no funciona fuera de él.
document.addEventListener('DOMContentLoaded', function() { var allTextNodes = textNodesUnder(document.body); doSomething(allTextNodes); // Select the node that will be observed for mutations const targetNode = document.body; // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { function scanning(el) { // el.style.visibility = "hidden"; var newTextNodes = textNodesUnder(el); doSomething(newTextNodes); } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); //observer.disconnect(); //will not work if disconnect here }); function doSomething(node) { var newItem = document.createElement("SPAN"); newItem.style.backgroundColor = "red"; var textnode = document.createTextNode(node.textContent); newItem.appendChild(textnode); node.replaceWith(newItem); }Su devolución de llamada de MutationObserver se llama cada vez que cambia el contenido del nodo , incluidas las veces que lo hace dentro de la misma devolución de llamada. Antes de realizar cambios dentro de la devolución de llamada, llame a observer.disconnect() , luego vuelva a conectarse usando observe después de realizar sus cambios:
const callback = function(mutationsList, observer) { function scanning(el) { observer.disconnect(); // el.style.visibility = "hidden"; var newTextNodes = textNodesUnder(el); doSomething(newTextNodes); observer.observe(targetNode, config); } };