JSのWeb APIのMutationObserverで要素のテキスト変更を監視したい

Question

Web APIのMutationObserverを試しているのですが、ある要素のテキストの変更の監視が上手く出来ません。

以下が試してみたコードなのですが、なぜ、最後の３行のはどれも値自体はページ上で変更を確認できるのに、通知が来ないのでしょうか？

characterDataをtrueにしているので大丈夫かなと思ったのですが、上手くいきません。

<div id="test">TEST</div>

const target = document.getElementById('test');
 
const observer = new MutationObserver((mutations) => {
	mutations.forEach((mutation) => {
		console.log(mutation.type);
	});    
});
 
const config = { attributes: true, childList: true, characterData: true };
 
observer.observe(target, config);

// (OK!) このように変更するとlogにattributesと出た
// target.className = "aaa";

// (OK!) このように変更するとlogにchildListと出た
//target.innerHTML = "ddd"; 
//target.textContent = "555";
// target.innerText = "aaa";

// （質問） これらのいずれかを有効にすれば、どれでもテキストは変わる。
// しかし、ログに何も出力されないのは何故？

//　target.childNodes[0].textContent = "ddd";
//　target.childNodes[0].nodeValue = "ddd";

解決後の報告

監視対象をテキストノードにすることで、最後の部分でログ出力の結果がcharacterDataとなりました。

const target = document.getElementById('test').childNodes[0];

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        console.log(mutation.type);
    });    
});

const config = { attributes: true, childList: true, characterData: true };

observer.observe(target, config);

target.textContent = "eee"; // "characterData"

Answer 1

target.innerText = "aaa";
// ↑当方の環境では動作しました。
target.childNodes[0].textContent = "ddd";
target.childNodes[0].nodeValue = "ddd";
// ↑option に subtree:true を加えたところ動作しました。

Comments

[murabito]

監視対象はあくまでdiv要素なので、その子のtextノードの変更を監視するためには、subtreeをtrueにする必要があったのですね。納得がいきました。ありがとうございました。

[Lhankor_Mhy]

ひとつ目が動作しないというのが分からないですが……
ちなみに、type は childList でした。

[murabito]

すみません。１つ目は質問投稿時にコードを編集していた時に動いていたコードを動いていないコードの方に移してしまっていただけでした。

[murabito]

監視対象をdiv要素のテキストノードにすることで、最後の部分でログ出力の結果がcharacterDataとなりました。