观察带有突变的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 < / strong>

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>