フロントエンド開発の現場でDOMの変更を検知して処理を実行する場面は多くあります。DOMに変更が加わる場面としては、ユーザーのアクションによってページの一部が描画されたり、ページ内のエディタにfocusが当たった or 外れたタイミングで処理を実行するものもあるでしょう。
今回、非同期処理で実装されたシステムでDOM操作をする際に、DOMの変更をリアルタイムで検知できるメソッドを探していたところ、MutationObserverを発見しましたので忘備録として記録に残します。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
MutationObserver
MutationObserverとはその名の通り、「Mutation（変化）」を「Observe（監視）」するAPIです。
構文
const element = $('対象セレクタ');
// MutationObserverでDOMの変更時にコールバック関数を実行する
var mo = new MutationObserver(function() {
//実行する処理
function callback
});
// オブザーバーの設定
const config = {
監視の設定内容が入ります。
};
// オブザーバーの実行 : 引数には対象ノードとオブザーバーの設定を渡す
mo.observe(element, config);MutationObserverができること
- 対象要素の属性の変化を監視
- 対象要素のテキストノードの変化を監視
- 対象要素の子要素の変化を監視
- 対象要素の小孫ノードも監視
監視オプションの設定(変数 : configが該当)
true or falseで設定します。
const config = {
attributes: true,
attributeOldValue: true,
characterData: true,
characterDataOldValue: true,
childList: true,
subtree: true
}- attributes : 属性変化の監視するか
- attributeOldValue : 変化前の属性値をmutation.oldValueに格納するか
- characterData : テキストノードの変化を監視するか
- characterDataOldValue : 変化前のテキストをmutation.oldValueに格納するか
- childList : 子ノードの変化を監視するか
- subtree : 子孫ノードも監視対象に含めるか
コールバック関数
変更が検知された時に実装する内容を、コールバック関数内に記述します。
classを付与したり、要素を削除したりと使い方は幅広いので非常に便利な処理だと思います。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
