I am using MutationObserver
to detect when a specific class has been added to an element.
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']
});
My question is: Is there a better way to verify that this is a newly added class? Currently I am using regex to check that the class didn't exist previously and classList
to check that the class exists now. Seems messy
@sliptype - You could do it in the below manner:
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'}`);
}
}
});
});