勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでbodyタグ内に特定のClass要素が追加された際イベントを発火させる方法

   2023/05/12  JavaScript

ASPを使用したサイトでページ内に特定のClass要素が追加された際にJSでイベントを発火させたいという案件があった。通常であればClass要素を追加する際に当該イベントを実行すればよさそうだが、Class要素を追加する部分をASP側で制御していたため通常の方法が取られなかった。以下に対応方法をメモ。

 

MutationObserverを使用する

DOMの変化を監視するMutationObserverという機能を使うのが良さそう。以下リファレンス。

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MutationObserverのテスト</title>
</head>
<body>

    <p id="msg"></p>

    <script>
    const body = document.body;

    //監視開始
    const observer = new MutationObserver(records => {

        //.testというClassを見つけた場合
        if( document.querySelector('.test') !== null ){

            //監視を終了し、アラートを表示
            observer.disconnect(alert('success!'));
        }
    });

    observer.observe(body, {
        childList: true, //直接の子要素をチェック
        subtree: true //全ての子孫要素をチェック
    });

    //5秒後に#msg内に.test要素を挿入
    setTimeout(function(){
        const msg = document.getElementById('msg');
        msg.innerHTML = '<span class="test">msg</span>';
    }, 5000);

    </script>
</body>
</html>

上記の場合だとページを表示した5秒後に<p id="msg">内に<span class="test">が挿入され、それをMutationObserverで見つけてアラートを表示するという内容。念のため以下サンプルページ。

https://taitan916.info/sample/MutationObserver/

 

所感

MutationObserverというのは知らなかったため最初はsetIntervalで無理やり監視する形を取ろうとしたが、ソースコードの見た目やブラウザへの負荷的な面でどうなのかと悩ましかった。今回のようなケースはあんまり無さそうではあるがJSでDOM監視ができるというのは覚えておきたいところ。

 - JavaScript

  関連記事

jQueryにて特定のIDが存在するかチェックし分岐処理する方法

jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...