Javascript 单击后检查类/元素状态

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

document.querySelector（'button'）。addEventListener（'click'，function（）{
setTimeout（函数（）{
document.querySelector（'.old'）.classList='old-new'；
}, 100);
});
OLD
单击
使用类列表API完成此操作。因为一段时间后将添加新类。若并没有将新类添加到dom中，那个么您将无法获取该节点的引用进行比较。类列表提供了一个方便的方法来解决这个问题。使用
contains
方法检查是否添加了
new
类。如果添加，则更改文本

使用下面的代码

document.querySelector('button').addEventListener('click', function(){ 
 if(document.querySelectorAll('.old')[0].classList.contains("new")) {
   document.querySelector('.old').innerText = "123"
 }
});

为此，您可以使用：


document.querySelector（'button'）。addEventListener（'click'，function（）{
setTimeout（函数（）{
document.querySelector（'.old'）.classList='old-new'；
}, 500);
});
document.querySelector（'button'）。addEventListener（'click'，function（）{
var observer=新的MutationObserver（函数（mutationsList，observer）{
for（突变列表的var突变）{
如果(
突变类型==='attributes'&&
mutation.attributeName==='class'&&
mutation.target.classList.contains（'new'）
) {
mutation.target.innerText=“123”；
observer.disconnect（）；
}
}
});
observer.observe（document.querySelector（'.old'），{attributes:！0}）；
});
OLD
单击
即将发布相同的内容，这是首选解决方案是的，这绝对是一个更好的解决方案。谢谢@奥洛，很乐意帮忙！这只在您单击按钮两次时有效，它不会在类列表更改时观察到。