MutationObserver 类更改

Posted 2023-02-19

【中文标题】MutationObserver 类更改

【英文标题】：MutationObserver class changes

【发布时间】：2018-08-18 12:15:26

【问题描述】：

我正在使用MutationObserver 来检测何时将特定类添加到元素中。

const observer = new MutationObserver((mutations) =>  
    mutations.forEach((mutation) => 
      const el = mutation.target;
      if ((!mutation.oldValue || !mutation.oldValue.match(/\bis-busy\b/)) 
        && mutation.target.classList 
        && mutation.target.classList.contains('is-busy'))
        alert('is-busy class added');
      
    );
 );

observer.observe(document.querySelector('div'),  
  attributes: true, 
  attributeOldValue: true, 
  attributeFilter: ['class'] 
);

我的问题是：有没有更好的方法来验证这是一个新添加的类？目前我正在使用正则表达式来检查该类以前不存在，并使用classList 来检查该类现在存在。看起来很乱

Fiddle

【问题讨论】：

没有其他方法，但您可以使用正则表达式来检查一致性:-)

【参考方案1】：

@sliptype - 您可以通过以下方式进行操作：

const element = document.querySelector('div');
let prevState = element.classList.contains('is-busy');
const observer = new MutationObserver((mutations) =>  
    mutations.forEach((mutation) => 
        const  target  = mutation;

        if (mutation.attributeName === 'class') 
            const currentState = mutation.target.classList.contains('is-busy');
            if (prevState !== currentState) 
                prevState = currentState;
                console.log(`'is-busy' class $currentState ? 'added' : 'removed'`);
            
        
    );
);

【参考方案2】：

您可以尝试访问目标上的classname？

let observer = new MutationObserver(function(mutations) 
    mutations.forEach(function(mutationRecord) 
        if (mutationRecord.target.className === "is-busy") 
            console.log("Class added....")

         else 
            console.log("Class not added....")
        ;
    )
);

let target = document.querySelector("your-div");

observer.observe(target,  attributes : true, attributeFilter : ['style', 'className'] );

【讨论】：

如果当新的变化出现时，is-busy 类已经存在，这是否准确？