Observar los cambios del DOM en extensiones.
MutationObserver es una solución para escuchar a los cambios del DOM y hacer lo que quiere hacer con los elementos cuando cambiaron. En el siguiente ejemplo, hay una cierta emulación del contenido de la carga dinámica con una ayuda de contadores de tiempo, después de la primera creación del elemento “target” pasa “subTarget”. En código de la extensión en primer lugar rootObserver funciona hasta la apariencia del targetElement luego empieza el elementObserver. Esta observación en cascada ayuda a obtener finalmente el momento en que se encuentra subTargetElement. Es útil para desarrollar extensiones a los sitios complejos con contenido de carga dinámica.
const observeConfig = {
attributes: true,
childList: true,
characterData: true,
subtree: true
};
function initExtension(rootElement, targetSelector, subTargetSelector) {
var rootObserver = new MutationObserver(function(mutations) {
console.log("Inside root observer");
targetElement = rootElement.querySelector(targetSelector);
if (targetElement) {
rootObserver.disconnect();
var elementObserver = new MutationObserver(function(mutations) {
console.log("Inside element observer")
subTargetElement = targetElement.querySelector(subTargetSelector);
if (subTargetElement) {
elementObserver.disconnect();
console.log("subTargetElement found!")
}
})
elementObserver.observe(targetElement, observeConfig);
}
})
rootObserver.observe(rootElement, observeConfig);
}
(function() {
initExtension(document.body, "div.target", "div.subtarget")
setTimeout(function() {
del = document.createElement("div");
del.innerHTML = "<div class='target'>target</div>"
document.body.appendChild(del)
}, 3000);
setTimeout(function() {
var el = document.body.querySelector('div.target')
if (el) {
del = document.createElement("div");
del.innerHTML = "<div class='subtarget'>subtarget</div>"
el.appendChild(del)
}
}, 5000);
})()
Use the 100 answers in this short book to boost your confidence and skills to ace the interviews at your favorite companies like Twitter, Google and Netflix.
GET THE BOOK NOWA short book with 100 answers designed to boost your knowledge and help you ace the technical interview within a few days.
GET THE BOOK NOW