【JS】DOMの変更を監視して表示を変えたい

2017年12月6日JavaScript

こんにちは、しきゆらです。
今回は、DOMの変化により発火するイベントを知ったので、使い方をメモしておきます。

 やりたいこと

DOMの数を数えて、数を表示したい。
というのも、最近のライブラリとかならば出来るんだろうけど素のJSでなんとかできないのか、と思って調べてみるとうっかりありました。

その名も、Mutation events！！
Mutation events – ウェブデベロッパーガイド | MDN

しかし、どうもこれは推奨されておらず代わりに使うものを教えてくれていますね。
 

MutationObserver

今回の本題。
これをつかうと、DOMの変更を検知して特定の関数を実行する事ができます。
といっても、基本的なものはMDNさんに使い方があるのでそっちもどうぞ。

MutationObserver – Web API インターフェイス | MDN

使い方

基本的には、newでインスタンスを作るだけですね。

// 監視するObserverを作る 
let mutation = new MutationObserver(
  function(){ 
    console.log("dom change!!"); 
  }
);

// 監視対象
let target = document.getElementById("hoge");

// 監視するものを指定 
let config = { children: true, subtree: true, }; 

// 監視開始
mutation.observer(target, config);

これにより、監視対象に変化があればnewした時に渡したイベントを実行してくれます。
 
変化の監視というのは、属性・文言・子要素等指定ができます。
必要なところを監視できますよ。
 
基本的に、これらを連想配列で渡してあげればいけます。
childList、attribute、characterDataにはtrue/falseを指定するだけ。
簡単ですね。
 
これで、監視対象に変化があれば特定の関数を実行できるようになりました。
Reactさんの真似事が出来るかもしれませんね。
 
今回は、ここまで。
おわり

Posted by しきゆら