Estoy tratando de usar MutationObserver para observar cambios en el DOM, pero parece que no puedo acceder a los nodos "grandes"-hijos. He configurado el observador con valores de subárbol y childList. Según tengo entendido, no es posible obtener todo el árbol DOM de childLists o cambios agregados con MutationObserver, todo lo que hace es observar los cambios. En su lugar, se supone que debes usar getElementById.
Intenté usar getElementById para encontrar el nodo "principal" relevante en el DOM después de observar el cambio, y luego rastrear todos los childNodes. Aunque todavía no recibo resultados en childNodes.
Supongo que el nodo "principal" se inserta primero en el DOM, y los childNodes luego se insertan en el nodo "principal" después del hecho, aunque estos eventos no se activan en el observador por alguna razón.
Sospecho que podría necesitar actualizar el objetivo de MutationObserver a medida que observo los cambios y luego usar continuamente getElementById y rastrear estos nodos.
¿Alguna idea de por qué estos childNodes no son observables y/o cómo abordar la solución a esto?
Saludos.
Código para MutationObserver
function createObserver() { const documentBody = document.body; // callback function to execute when mutations are observed const observer = new MutationObserver(mutationRecords => { let addedNodes = [] for (const mut of mutationRecords) { let arr = Array.prototype.slice.call(mut.addedNodes) arr = arr.filter(node => popupTagNames.includes(node.tagName)); // Keep only selected tags if (arr.length == 0) return; // don't keep empty addedNodes = addedNodes.concat(arr) let el = document.getElementById(addedNodes[0].id); // Crawler inspectNode(el) } }) const config = { attributes: true, childList: true, subtree: true, characterData: true } observer.observe(documentBody, config) }Investiguemos registrando los nodos agregados que pertenecen al elemento #qc-cmp2-container:
new MutationObserver(mutations => { const parent = document.getElementById('qc-cmp2-container'); if (parent) console.log(...mutations.flatMap(m => [...m.addedNodes].filter(n => parent.contains(n)).map(n => n.cloneNode(true)))); }).observe(document, {subtree: true, childList: true});Veremos varias llamadas separadas:
La solución más eficaz en términos de recursos es esperar a que el elemento principal use la verificación súper rápida getElementById y luego cambiar a observar al elemento principal:
function waitForId(id, callback) { let el = document.getElementById(id); if (el) { callback(el); } else { new MutationObserver((mutations, observer) => { el = document.getElementById(id); if (el) { observer.disconnect(); callback(el); } }).observe(document, { subtree: true, childList: true }); } } waitForId('qc-cmp2-container', parent => { new MutationObserver((mutations, observer) => { // do something }).observe(parent, { subtree: true, childList: true }); });