javascript - 使用 mutationObserver 观察 html 文本变化

Question

我尝试观察 HTML 元素中的文本是否发生变化，因此如果出现了某些文本，它将显示另一个元素。

var travelarea = document.querySelector("#travelInformationStep");
var MutationObserver = window.MutationObserver;
var observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    if(mutation.target.text === "Europe"){
     document.getElementById("terjer2").style.display = "block";
    }
  });
});
var config = {attributes: true, childList: true, characterData: true}
observer.observe(travelarea, config); 

但我不确定我应该如何检查 if 语句中的这些更改。

Answer 1

尝试检查目标的 textContent 。如果用例需要避免检查未在浏览器中呈现但存在于 mutation.target 中的隐藏内容或其他文本内容你可以使用 innerText而不是 textContent

var travelarea = document.querySelector("#travelInformationStep");
var MutationObserver = window.MutationObserver;
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.target.textContent === "Europe") {
      alert('Text changed to Europe');
    }
  });
});

var config = {attributes: true,  childList: true,  characterData: true};
observer.observe(travelarea, config);

document.getElementById('changeText').addEventListener('click', function(e) {
  travelarea.textContent = travelarea.textContent === 'Europe' ? 'random text' : 'Europe';
});

<p id="travelInformationStep">Some text</p>

<button id="changeText">Change</button>