JavaScriptでbodyタグ内に特定のClass要素が追加された際イベントを発火させる方法
2023/05/12
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監視ができるというのは覚えておきたいところ。
関連記事
-
フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法
PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
セレクトメニューにサジェスト機能をつける方法(select2)
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...