極めて有用なDOM API-MutationObserverリスニングノードの変化の詳細

今日は役に立つDOM APIを紹介します.
MutationObserver
背景の使用
ページまたは親DOMは、次のような統一コールバックを行うために、子ノードの変化をリスニングする必要があります.

特定属性名の変更、例えばclassなど

属性の変化

DOMツリー全体の中性子ノードの変化

MutationObserverの紹介
ここではMDNの公式紹介を採用し,MutationObserverインタフェースはDOMツリーへの変更を監視する能力を提供する.DOM 3 Events仕様の一部である古いMutation Events機能の代替品として設計されています.
MutationObserverには、主に3つの方法が含まれています.具体的には、次の例を参照してください.

disconnect()-MutationObserverインスタンスが受信を継続することを阻止する通知

observe()-設定MutationObserverはDOMで指定されたオプションに一致する

を変更する.

takeRecords()-MutationObserverの通知キューから処理対象のすべての通知

を削除します.
インスタンス&例
MutationObserver()でインスタンスを作成できます.次に使用例を示します.

//            
const targetNode = document.getElementById('some-id');

//       （        ）
const config = {
    attributes: true, //       
    childList: true, //        
    subtree: true //               
};

//               
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

//                 
const observer = new MutationObserver(callback);

//              
observer.observe(targetNode, config);

//   ，     
observer.disconnect();

configの値の紹介
前述のconfigは、MutationObserverInit辞書で、MutationObserverの構成を説明しています.構成には、次のオプション属性があります(必須属性はありません).
ツールバーの
紹介する
attributeFilter
監視する特定の属性名の配列.この属性が含まれていない場合、すべての属性の変更によって変更通知がトリガーされます.デフォルトはありません.
attributeOldValue
ノードのプロパティ変更を監視すると、このプロパティをtrueに設定すると、変更されたプロパティの前の値が記録されます.デフォルトはありません.
attributes
trueに設定して、監視されている要素の属性値の変更を観察します.デフォルトはfalseです.
characterData
trueに設定して、指定したターゲットノードまたはサブノードツリーに含まれるノードの文字データの変化を監視します.デフォルトはありません.
characterDataOldValue
trueに設定して、監視ノードでテキストが変更されたときにノードテキストの前の値を記録します.デフォルトはありません.
childList
ターゲットノード(subtreeがtrueの場合、子孫ノードを含む)を監視するためにtrueに設定し、新しいサブノードを追加または削除します.デフォルトはfalseです.
subtree
trueに設定して、ターゲットノードツリー全体のすべてのノードに監視範囲を拡張します.MutationObserverInitの他の値は、ターゲットノードだけでなく、このサブツリーの下にあるすべてのノードにも作用します.デフォルトはfalseです.
callbackの紹介
callbackは、指定されたノードまたはサブツリー、および構成項目がDomに変更されるたびに呼び出されるコールバック関数です.コールバック関数には、2つのパラメータがあります.1つは、変更がトリガーされたすべてのMutationRecordオブジェクトの配列を記述し、もう1つは、関数を呼び出すMutationObserverオブジェクトです.
参考記事:
https://developer.mozilla.org...
APIの適合性: