无法观察到突变并登录到控制台

Question

I have the following script that runs on page load. It's meant to observe every td element on the page and check if it changes.

I was just logging the mutation to console to see my next steps, as I want to see what values change in each td element (the div refreshes every 15 seconds that houses the table).

Here's what I've got so far:

jQuery(document).ready(function( $ ) {

    /** Change URL */
    setInterval(function() {

        $.ajax({
            url: 'http://localhost:8888/profitmanager/wp-content/plugins/football-stats/update.php'
        }).done(function(){
            $('.fbs_results').load(
                location.href+" .fbs_results>*", function(){
                    var hidden = [];
                    $.each(JSON.parse(localStorage.getItem("table_state")), function(index, value) {
                        if(value == 'hidden'){
                            $('tr[data-index="'+index+'"]').hide();
                        }

                    });

                    // console.log(hidden);
                    $('tr').each(function(index){

                    });
                }
            );
        });
    }, 15000);

    const config = {
      characterData: true,
      characterDataOldValue: true,
      childList: true,
      subtree: true
    };

    function tdChanges(mutations) {
      mutations.forEach((mutation) => {
        console.log(mutation);
        // if (mutation.addedNodes.value) {
        //  console.log();
        // }
      });
    }

    const tds = document.querySelectorAll('td');
    Array.from(tds).forEach(function(td) {
        const observer = new MutationObserver(tdChanges);
        observer.observe(td, config);
    });

});

But it doesn't work, nothing logs. Weird.

Can anyone fix my code?

TIA

Answer 1

querySelector() returns only a single Element. To look at all of them you need to use querySelectorAll() then loop over the result:

const tds = document.querySelectorAll('td');
Array.from(tds).forEach(function(td) {
  const observer = new MutationObserver(tdChanges);
  observer.observe(td, config);
});

Here's a working example in a jsFiddle , as the SO snippet editor is sandboxed and has issues running MutationObservers.

One thing to note here is that MutationObservers are not fast, and if you have a lot of td elements in your page you may see a performance hit. You may be better served by placing a single MutationObserver on the parent table and letting the event bubble up, like this .