【JS】MutationObserverで監視設定する

背景
編集画面で変えたものを確認画面で反映するには、よくイベントリスナーを使っているが、実はリソースの消費がより抑えられる効率的なもう一つの方法がある。

説明
MutationObserverはDOMの変更をリアルタイムで監視するAPIである。
DOM変更が発生すると、自動的にコールバック関数（下記の例ではobserver）が呼び出され、変更の詳細はmutationsListに渡される。詳細によって処理が分かれる。

observe()はリアルタイム監視を可能にする鍵で、どの要素のどの変更を監視するかを設定できる。
第1引数は監視対象、
第2引数は監視する変更の種類。
【変更の種類】
childList: true
子要素の追加/削除を監視
subtree: true
全ての子孫要素の変更を監視
attributes: true
属性の変更を監視
など…

    //#editor内のdivの変更を監視する
    const editor = document.getElementById('editor');
    const observer = new MutationObserver(function(mutationsList) {
        mutationsList.forEach(function(mutation) {
        //変更の種類によって処理するなど
        if (mutation.type === 'childList') {
            console.log('子要素が追加/削除されました');
        }
        if (mutation.type === 'attributes') {
            console.log('属性が変更されました');
        }
        });
    });

    //observerの監視設定
    observer.observe(editor, { childList: true, subtree: true, attributes: true });

    //必要に応じて監視を停止
    //observer.disconnect();