如何知道 MutationRecord 到底发生在哪里（多个目标）？

Question

我试图观察一组元素。元素的数量可以是多种多样的：从 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 字符数据。在我的示例中，现在 $observedElements[1] 从 '35.00' 更改为 '25.00'

但是我怎么知道这个变化发生在 emelent $observedElements[1] 中？在收到的 target.textContent 中，我将只有文本值。

Answer 1

MutationRecord.target 已经指向更改的项目，因此您可以使用

找到根

function findObserver(mutationRecord) {
  for (var i = 0; i < $observedElements.length; i++) {
    if ($observedElements[i].contains(mutationRecord.target)) {
      return $observedElements[i];
    }
  }
  return null;
}

如何知道 MutationRecord 到底发生在哪里（多个目标）？

How to know, where exactly MutationRecord happened (multiple targets)?

javascript

dom4

mutation-observers