CODEWITHSUNDEEP
javascripthtmlmutation-observers
Zea Lith
Zea Lith

Reputation: 421

Find class of newly appear DOM using mutation observer?

I want to detect what kind of item is coming after facebook's new post appear on users' feed when they scroll, I'm able to detect the new dom change but I'm stuck at mutation observer callback,

The $(this) isn't equal to the newly appear DOM, what I don't know what to do.

// Necessary for Facebooks "neverending" scrolling
var observer = new MutationObserver(function (mutations, observer) {
    // fired when a mutation occurs

    var x = $(this);
    console.log(x) // I'm stuck here, what to do?
});

// pass in the target node, as well as the observer options
observer.observe($('[id^=topnews_main_stream_]').get(0), {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
});

Upvotes: 1

Views: 1245

Answers (2)

Satpal
Satpal

Reputation: 133453

You can use mutations object to filter the type of mutation and its addedNodes property will return the newly add nodes

var observer = new MutationObserver(function (mutations, observer) {
    mutations.forEach(function(mutation) {
        if (mutation.type == "childList") {
            console.log(mutation.addedNodes)
        }
    }); 
});


var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var list = document.querySelector('#form');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList') {
      console.log(mutation.addedNodes)
    }
  });
});

observer.observe(list, {
  attributes: true,
  childList: true,
  characterData: true
});

setTimeout(function() {
  var data = '<a href="#" class="Yahooooooooo">Publishing options</a>';
  jQuery("#form").append(data)
}, 5000)
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<form action="" method="post" id="form">
</form>

Upvotes: 1

Piotr Białek
Piotr Białek

Reputation: 2737

You should log variable mutations in callback function:

var observer = new MutationObserver(function (mutations, observer) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    }); 
});

Upvotes: 1

Related Questions