Listening to DOM events (specific attributes)

Question

I need to get data when a specific attribute is added . I have read this post : Is there a JavaScript/jQuery DOM change listener?

  var observer = new MutationObserver(function (mutations, observer) {
    // fired when a mutation occurs
     $.each(mutations, function(index, mutation) {

      var post = $(mutation.target).find('div[class^="ContentWrapper"]');


     });
  });
  observer.observe(document, {
    subtree: true,
    attributes: true

  });

There is a problem with this approach because there are to many events and the extension is very slow,is there an option to filter the mutations,by specific attribute?

Answer 1

Use attributeFilter in the MutationObserverInit options. Set it to an array of attributes that you want to listen for like so:

var attributeSpecificObserver=new MutationObserver(function_you_want_observing);
attributeSpecificObserver.observe( element_you_want_to_observe, {
    attributeFilter: ['id', 'class', 'style', 'etc'],
} );

Source: Mozilla Developer Network (MDN).