JavaScript で DOM 要素を監視する MutationObServer の詳細

オブザーバーを新しい MutationObserver(() => console.log("change"));

console.log(オブザーバー);

// 2 つのパラメータ observer (DOM 要素、MutationObserverInit オブジェクト) を受け取ります。

オブザーバーを新しい MutationObserver(() => console.log("change"));

//body要素の属性の変更を監視する observer.observe(document.body, {

    属性: true

});

// body 要素のクラスを変更すると、MutationObserver オブジェクトの作成時に渡されたコールバック関数が非同期的に実行されます。 document.body.className = "main";

console.log("body属性が変更されました");

// コンソール出力:

// ボディ属性を変更しました // 変更

オブザーバー = 新しい MutationObserver(

    // コールバック関数は MutationRecord インスタンスの配列です。形式は次のとおりです。

    // [MutationRecord、MutationRecord、MutationRecord、...]

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true

});

ドキュメント.body.className = "main";

console.log("body属性が変更されました");

// コンソール出力:

// ボディ属性を変更しました // (1) [MutationRecord]

// ミューテーションレコード

オブザーバー = 新しい MutationObserver(

    // コールバック関数は配列である MutationRecord インスタンスを受け取ります。

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true

});

 

// 3 回変更します document.body.className = "main";

document.body.className = "コンテナ";

document.body.className = "ボックス";

 

// コンソールに次のように出力されます:

// (3) [ミューテーションレコード、ミューテーションレコード、ミューテーションレコード]

オブザーバー = 新しい MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true

});

// 最初の変更 document.body.className = "main";

 

//observer.disconnect() を終了します。

 

// 2 番目の変更 document.body.className = "container";

 

// ログ出力なし

オブザーバー = 新しい MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true

});

// 最初の変更 document.body.className = "main";

 

// 終了 setTimeout(() => {

    オブザーバーを切断します。

    // 3 番目の変更、次の変更はコールバックされません document.body.className = "container";

}, 0);

 

// 2 番目の変更 document.body.className = "container";

 

// ページ出力:

// (2) [ミューテーションレコード、ミューテーションレコード]

オブザーバー = 新しい MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true

});

// 最初の変更は、mutationRecords 配列に入力されます。document.body.className = "main";

// 終了 setTimeout(() => {

    オブザーバーを切断します。

    // 2 番目の変更は終了しているため、次の変更は mutationRecords 配列に入力されません。 document.body.className = "container";

}, 0);

タイムアウトを設定する(() => {

    // オブザーバーを再度有効にします。observe(document.body, {

        属性: true

    });

    // 本文の属性を変更し、mutationRecords 配列を入力します。document.body.className = "container";

}, 0);

 

// コンソール出力:

// [ミューテーションレコード]

// [ミューテーションレコード]

オブザーバー = 新しい MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true

});

 

// 最初の変更は、mutationRecords 配列に入力されます。document.body.className = "main";

// 2 番目の変更は、mutationRecords 配列に入力されます。document.body.className = "container";

// 3 番目の変更は、mutationRecords 配列に入力されます。document.body.className = "box";

// 変更レコードを取得して処理します let mutationRecords = observer.takeRecords();

コンソールにログを記録します。

// コンソール出力:

// (3) [ミューテーションレコード、ミューテーションレコード、ミューテーションレコード]

コンソールにログを記録します。

// コンソール出力:

// []

//observer.disconnect() を終了します。

オブザーバー = 新しい MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

// div1 要素を作成して listen します。let div1 = document.createElement("div");

オブザーバー.観察(div1, {

    属性: true

});

div1.id = "ボックス1";

 

// div2 を作成して listen します。let div2 = document.createElement("div");

オブザーバー.観察(div2, {

    属性: true

});

div2.id = "ボックス2";

 

// コンソール出力:

// (2) [ミューテーションレコード、ミューテーションレコード]

オブザーバー = 新しい MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true

});

// カスタム属性を変更する document.body.setAttribute("data-id", 1);

 

// コンソール出力:

// [ミューテーションレコード]

オブザーバー = 新しい MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true、

    // ホワイトリスト属性を設定するFilter: ["data-id"]

});

 

// ホワイトリスト attributeFilter の属性を変更し、mutationRecords を入力します

document.body.setAttribute("データID", 1);

 

// ホワイトリスト attributeFilter に含まれず、mutationRecords に入力されない属性を変更します

document.body.setAttribute("class", "main");

 

// コンソール出力:

// [ミューテーションレコード]

オブザーバー = 新しい MutationObserver(

    // MutationRecord オブジェクトの oldValue は古い値を表します (mutationRecords) => console.log(mutationRecords.map((x) => x.oldValue))

);

オブザーバー.観察(ドキュメント.本文, {

    属性: true、

    属性OldValue: true、

});

// 最初の変更。元々値がないので、古い値 oldValue = null

document.body.setAttribute("class", "main");

// 2回目の変更。以前に一度変更されているため、古い値 oldValue = main

document.body.setAttribute("クラス", "コンテナ");

 

// コンソール出力:

// (2) [null, 'main']

<!-- セクシーな div -->

<div id="box">こんにちは</div>

<script type="text/javascript">

    オブザーバー = 新しい MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

    // テキストノードを取得します。let textNode = document.getElementById("box").childNodes[0];

    オブザーバー.observe(textNode, {

        //テキストの変更を観察する characterData: true

    });

    // テキストを変更します textNode.textContent = "Hi";

 

    // コンソール出力:

    // [ミューテーションレコード]

</スクリプト>

<!-- セクシーな div -->

<div id="box">こんにちは</div>

<script type="text/javascript">

    オブザーバー = 新しい MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

    // div をリッスンしても効果はありません let box = document.getElementById("box");

    オブザーバー.観察(ボックス, {

        文字データ: true

    });

    box.textContent = "こんにちは";

 

    //コンソールに出力なし</script>

<!-- セクシーな div -->

<div id="box">こんにちは</div>

 

<script type="text/javascript">

    オブザーバー = 新しい MutationObserver(

        (mutationRecords) => console.log(mutationRecords.map((x) => x.oldValue))

    );

    // テキストノードを取得します。let textNode = document.getElementById("box").childNodes[0];

    オブザーバー.observe(textNode, {

        //テキストの変更を監視 characterData: true,

        // 古いデータを保持する characterDataOldValue: true,

    });

    // テキストを 2 回変更します textNode.textContent = "Hi";

    textNode.textContent = "いいですね";

 

    // コンソール出力:

    // (2) ['こんにちは', 'やあ']

</スクリプト>

<!-- セクシーな div -->

<div id="box">こんにちは</div>

<script type="text/javascript">

    オブザーバー = 新しい MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

    // div を取得する

    box = document.getElementById("box"); とします。

    オブザーバー.観察(ボックス, {

        //子ノードの変更を観察 childList: true,

    });

    // 要素を追加 let span = document.createElement("span")

    span.textContent = "世界";

    ボックスの子要素を追加します。

 

    // コンソール出力:

    // [ミューテーションレコード]

</スクリプト>

<!-- セクシーな div -->

<div id="box">こんにちは</div>

 

<script type="text/javascript">

    オブザーバー = 新しい MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

 

    // div を取得する

    box = document.getElementById("box"); とします。

    オブザーバー.観察(ボックス, {

        //子ノードの変更を観察 childList: true,

    });

    // 最初の子ノード（Hello テキスト ノード）を削除します。box.removeChild(box.childNodes[0]);

 

    // コンソール出力:

    // [ミューテーションレコード]

</スクリプト>

<!-- セクシーな div -->

<div id="box">こんにちは世界</span></div>

 

<script type="text/javascript">

    オブザーバー = 新しい MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

 

    // div を取得する

    box = document.getElementById("box"); とします。

    オブザーバー.観察(ボックス, {

        //子ノードの変更を観察 childList: true,

    });

    // spanノードをHelloノードの先頭に移動します。box.insertBefore(box.childNodes[1], box.childNodes[0]);

    // ノードを移動するということは、実際には最初にノードを削除してから追加することを意味します。

 

    // コンソール出力:

    // (2) [ミューテーションレコード、ミューテーションレコード]

</スクリプト>

<!-- セクシーな div -->

<div id="box">こんにちは世界</span></div>

 

<script type="text/javascript">

    オブザーバー = 新しい MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

 

    box = document.getElementById("box"); とします。

    オブザーバー.観察(ボックス, {

        属性: true、

        //サブツリーの変更を観察する subtree: true

    });

    // span要素のid属性の変更を観察できます box.childNodes[1].id = "text";

    // コンソール出力:

    // [ミューテーションレコード]

</スクリプト>