要素のグループを観察しようとしています。要素の数は、1 から 10 までさまざまです。
$observedElements = document.querySelectorAll('em.price');
// in that time length will be 3.
// $observedElements[0] is a '<em class='price'>10.15</em>'
// $observedElements[1] is a '<em class='price'>35.00</em>'
// $observedElements[2] is a '<em class='price'>48.95</em>'
そう..
var observer = new MutationObserver(function(MutationRecord) {
MutationRecord.forEach(function(MutationRecord) {
if (MutationRecord.type == 'characterData') {
console.log ('got it ... in elem. № ? ');
// which element is affected by this mutation? [0], [1] or [2] ?
};
});
});
var observerConfig = { attributes: false, childList: true, characterData: true, subtree: true, };
for (var i = 0; i < $observedElements.length; i++) {
observer.observe($observedElements[i], observerConfig);
};
いずれかの要素の値が変更された場合、MutationRecord.type characterData を受け取ります。私の例では、$observedElements[1] が '35.00' から '25.00' に変わります。
しかし、この変更が優れた $observedElements[1] にあったことをどのように知ることができますか? 受信した target.textContent には、テキスト値のみが含まれています。