動的にdomが追加された時点でjsを発動させたい

Question

###前提・実現したいこと
あるID(仮にdiv id="kari")がdomに追加された時点で
jsを発動させたく調べていました。
js発動とは具体的には以下のようなシンプルなことです。
（div id="kari"のいくつかの子要素にcssを適用したい）
この動的に追加するjsはいじれないという前提です。

###調査したこと
・最初に見つけたのはDOMNodeInsertedというものですが非推奨とのことでした。

・次にObserverの情報がたくさんあったので
いろいろ見ていたのですがECMAScript7で廃止されるとの情報を発見しました。
http://tech.nitoyon.com/ja/blog/2015/11/18/death-of-oo/

・ECMAscript2015のproxyでもデータバインディングができるのか調査していたら
まだandroidブラウザで実装されていませんでした。

・代替案として現在自分でも調査中なこと
┗上記ページでご紹介くださったライブラリーでの実装
┗Object.definePropertyでデータバインディング可能なのか？

自分としてはなるべくライブラリーやフレームワークに
依存しない方法を探しているのですが
調査中著名なフレームワークでもそれぞれ実装方法が違うという記事があったり
なかなかピュアjsでは難しいのかな？とも予想しております。
###質問内容
・現時点でjsでのデータバインディングを実現するにはどのような方法がおすすめでしょうか。
・Object.definePropertyが自分の中では最有力候補で調べておりますが
Object.definePropertyでdomの監視＋変化があったらイベント発動
ということは可能なのでしょうか。
・もっとシンプルな方法や、おすすめの方法などありましたらご教授いただきたく思います。

具体的なコードを動かすところの糸口が見えずこのような質問となってしまい
恐縮ですが皆様のお知恵、ご経験談、おすすめ方法などを拝借できましたら幸いです。

Answer 1

MutationObserverでいいのではないでしょうか？
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

モバイルを含むほぼすべてのブラウザで対応しています。
http://caniuse.com/#search=MutationObserver

Comments

[ruuusaamarki]

回答ありがとうございます！

重ねての質問となってしまい誠に恐縮ですが
こちらはobserver.observeを使わず実装することは可能なのでしょうか。

この辺り、よくわからず質問してしまい申し訳ありません。

[x_x]

MDNのリンク先にコード例があるように、MutationObserverインスタンスを作ってobserve()するだけです。

observer.observeというのは何を指していますか？
Object.observe()と混同しているのでしょうか？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/observe

[ruuusaamarki]

度々の回答ありがとうございます！

おっしゃる通りObject.observe()と混同しておりました。
MutationObserverでやってみます。ありがとうございました！