Наблюдение за изменениями текста HTML с помощью mutationObserver - PullRequest
Новая
       12

Наблюдение за изменениями текста HTML с помощью mutationObserver

0 голосов
/ 08 января 2019

Я пытаюсь наблюдать, изменяется ли текст в элементе 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.

1 Ответ

0 голосов
/ 08 января 2019

Попробуйте проверить 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>
...