【JavaScript + JQuery】DOMの変更を監視するリスナー「domsubtreemodified」について

特定のページで面倒な操作を自動でやりたいときなど、拡張機能を作成すると思います。
リンクやボタンをクリックした時に、ページ遷移じゃなくてDOM全体がふわっと変わるような洒落乙なサイトも時々あって、そういうときって
DOMが変更された時に反応して処理を走らせたかったりします。

やり方

$('HTML').on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

この場合、htmlタグの中の何かが変更されたら処理が走ります。
セレクタ「$('HTML')」の部分を変えれば範囲を絞れます。

ただ気を付けて欲しいのが、

セレクタが配列だとだめ

$('div').on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

divタグはたくさん使いますからね。一意になりません。
やるなら

$('div')[0].on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

ですね。
divでもspanでもなんでも一意に指定できれば可能です。
まぁリスナってそういうものですよね。どうしても全部やりたいならforで回してひとつひとつ付けてやりましょう。

セレクタで指定したDOMそのものが消えてしまう場合もだめ

$('#will_delete')on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

これだと、こんな感じに消されると反応しません。

$('#will_delete').remove()

セレクタについて

JQureyで要素を指定するセレクタのやり方全部書いてあるサイト貼っときます。
地味にこれから調べようとしてる人いますよね多分
www.hp-stylelink.com