要素の値変更の仕方によるMutationObserverへの影響

要素の値変更方法

<span class="foo"></span>

とあった場合

document.querySelector('.foo').textContent = 'foo';

とした時と

document.querySelector('.foo').firstChild.nodeValue = 'foo';

とした時では結果は同じだけど処理内容は異なる

textContent = 'foo' とした場合は、値を変更してるわけではなく、textノード削除後にtextノードを追加している

MutationObserverへの影響

MutationObserverは、DOMツリーの変化を検出する機能。

textContent = 'foo'とする場合はchildList:trueを指定しないとイベントが発生しない

var ob = new MutationObserver(function(recs){
    recs.forEach(function(rec){...
});
ob.observe(document.querySelector('.foo'),{
	childList:true
});