javascript - 单击后检查类/元素状态

Question

假设我看不到下面的代码，我不知道超时设置了多长时间，我也无法更改原始代码

document.querySelector('button').addEventListener('click', function(){ 
  setTimeout(function(){ 
    document.querySelector('.old').classList = 'old new';

}, 100);
});

<div class="old">OLD</div>
<button>Click</button>

我想要实现的是，一旦添加了 new 类，然后我想更改 TEXT 行，hack 代码如下

document.querySelector('button').addEventListener('click', function(){ 
  setTimeout(function(){ 
    document.querySelector('.old').classList = 'old new';

}, 100);
});

document.querySelector('button').addEventListener('click', function(){ 
   if(document.querySelectorAll('.new').length !== 0) {
       document.querySelector('.old').innerText = "123"
   }
});

<div class="old">OLD</div>
<button>Click</button>

document.querySelector('button').addEventListener('click', function(){ 
     if(document.querySelectorAll('.new').length !== 0) {
        document.querySelector('.old').innerText = "123"
     }
  });

因为我无法知道超时秒数，所以我的第一次点击不会起作用，因为它会立即执行。所以我必须添加比原来更大的超时秒数。是否有一种有效的方法来检测是否添加了 new 类？或者超时是这个用例的最佳解决方案？谢谢

Answer 1

您可能会使用 Mutation Observer为此目的:

document.querySelector('button').addEventListener('click', function() {
  setTimeout(function() {
    document.querySelector('.old').classList = 'old new';

  }, 500);
});

document.querySelector('button').addEventListener('click', function() {
  var observer = new MutationObserver(function(mutationsList, observer) {
    for (var mutation of mutationsList) {
      if (
        mutation.type === 'attributes' &&
        mutation.attributeName === 'class' &&
        mutation.target.classList.contains('new')
      ) {
        mutation.target.innerText = "123";
        observer.disconnect();
      }
    }
  });

  observer.observe(document.querySelector('.old'), {attributes: !0});

});

<div class="old">OLD</div>
<button>Click</button>