このページで実行済みのコード
// 監視対象の設定(表1参照) var config = { attributes: true, childList: true, characterData: true, subtree: true }; // MutationObserverインスタンスを作成 var observer = new MutationObserver(function(mutations) { // 更新情報が複数まとまってくるのでそれぞれ処理する mutations.forEach(function(mutation) { // 更新情報を取得(表2参照) console.log('更新タイプ', mutation.type); console.log('対象ノード', mutation.target); }); }); // 対象ノードと監視設定を指定して監視開始 observer.observe(document.body, config);
開発コンソールで以下のコードを順番に実行して結果を確認してみてください
> document.body.appendChild(document.createElement('div')); 更新タイプ childList 対象ノード <body></body> > document.querySelector('body div').setAttribute('data-foo', 'bar'); 更新タイプ attributes 対象ノード <div data-foo="bar"></div>