破壊される要素にmutationObserversを使用するための最善のアプローチ

Question

私はAngular 1サイトでスクリプトを実行しようとしています。スクリプトはDOMを変更して関数を実行します。しかし、それは単一のページアプリケーションなので、私の好みの変異ターゲットノードは破壊され置き換えられ、そのターゲットがもはや存在しないのでmutationObserverが動作しなくなります。 親ノードの1つを対象にしているように感じるのは、何百もの突然変異を拾い、自分の好きなものを探しているのでちょっと混乱します。

もっと良いアプローチがありますか？

Answer 1

単一のMutationObserverインスタンスを作成する必要があります。要素をdocumentから削除する前にobserver.disconnect()と呼び出してください。

documentに新しい要素が追加された場合は、のメソッドMutationObserverのメソッドをターゲット要素と元の構成で呼び出します。

const el = "div"; 
 

 
let i = 0; 
 

 
let n = 0; 
 

 
function create() { 
 

 
    let div = document.createElement(el); 
 
    div.textContent = el + " " + ++i; 
 
    div.contentEditable = true; 
 
    document.body.appendChild(div); 
 
    return div 
 
} 
 

 
let div = create(); 
 

 
function handleMutation(mutation) { 
 
    console.log(mutation.type); 
 
    if (++n === 3) { 
 
    n = 0; 
 
    observer.disconnect(); 
 
    div.parentElement.removeChild(div); 
 
    div = create(); 
 
    // use same `MutationObserver` instance for new `<div>` element 
 
    observer.observe(div, config); 
 
    }; 
 
} 
 

 
const observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(handleMutation); 
 
}); 
 

 
const config = { 
 
    childList: true, 
 
    subtree: true, 
 
    characterData: true 
 
}; 
 

 
observer.observe(div, config);