He intentado registrar la información de costos actualizada de un documento HTML, pero no he tenido éxito. Estoy seguro de que tiene que ser que no estoy usando correctamente el observador de mutaciones. El archivo js está vinculado. A continuación se muestra el elemento HTML al que me dirijo.
HTML:
<span id="cost">0.00</span>
El archivo JS contiene el siguiente código:
const total = document.getElementById('cost'); console.log(total); const options = { characterData: true }; function logCallback(mutations) { console.log('called'); for (let mutation of mutations) { if (mutation.type === 'characterData') { console.log('Mutation Detected: Price changed'); } } } const observer = new MutationObserver(logCallback); observer.observe(total.childNodes[0], options);Su código funcionaría si el código que estaba haciendo el cambio cambiara el nodo de texto que está viendo en lugar de destruirlo y reemplazarlo, así:
total.childNodes[0].nodeValue = "1.00";Ejemplo en vivo:
const total = document.getElementById('cost'); const options = { characterData: true, }; function logCallback(mutations) { console.log('called'); for (let mutation of mutations) { if (mutation.type === 'characterData') { console.log('Mutation Detected: Price changed'); } } } const observer = new MutationObserver(logCallback); observer.observe(total.childNodes[0], options); // Code that changes the element total.childNodes[0].nodeValue = "1.00"; <span id="cost">0.00</span>Pero el código que realiza el cambio probablemente esté destruyendo y reemplazando el nodo secundario, así:
total.innerText = "1.00"; Para manejar eso, probablemente sea mejor que observe los cambios de childList en el elemento total en sí:
const total = document.getElementById('cost'); const options = { childList: true, }; function logCallback(mutations) { console.log('called'); for (let mutation of mutations) { console.log('Mutation Detected: Price changed'); } } const observer = new MutationObserver(logCallback); observer.observe(total, options); // Code that changes the element total.innerText = "1.00"; <span id="cost">0.00</span> Es posible que deba refinar eso (eliminé if verificó solo los cambios de characterData ) y / o combinarlo con lo que ya tenía (en caso de que algún otro código cambie el texto de manera diferente), pero ese es el problema principal con lo que tenía.