알기, 정확하게 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>' 

에 .. 어떤 요소 값이 변경되었을 때, MutationRecord.type CharacterData를 수신한다

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); 
}; 

. 내 예제에서 지금 $ observedElements [1]은 '35 .00 '에서 '25.00'로 변경됩니다.

그러나이 변경 사항은 emelent $ observedElements [1]에 있었는지 어떻게 알 수 있습니까? 받은 target.textContent에 텍스트 값만 있습니다.

Answer 1

MutationRecord.target 이미 변경된 항목을 가리키는 때문에 단순히`target`를 사용 왜 당신은

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