Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MutationObserver class changes

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

Fiddle

like image 473
sliptype Avatar asked Mar 09 '18 20:03

sliptype


2 Answers

@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'}`);
            }
        }
    });
});
like image 147
Naman Sancheti Avatar answered Nov 11 '22 01:11

Naman Sancheti


You could try accessing classname on the target?

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");

// MDN documentation
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#attributefilter
observer.observe(target, {
 attributes : true,
 attributeFilter : ['style', 'class']
});
like image 20
Reena Verma Avatar answered Nov 11 '22 01:11

Reena Verma