javascript - 突变没有观察并记录到控制台

Question

我有以下在页面加载时运行的脚本。它的目的是观察页面上的每个 td 元素并检查它是否发生变化。

我只是将突变记录到控制台以查看下一步，因为我想查看每个 td 元素中的值发生了哪些变化(容纳表格的 div 每 15 秒刷新一次)。

这是我到目前为止所得到的:

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

});

但是它不起作用，没有任何记录。奇怪。

有人可以修复我的代码吗？

TIA

Answer 1

querySelector() 仅返回单个元素。要查看所有这些，您需要使用 querySelectorAll() 然后循环结果:

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

这是 jsFiddle 中的一个工作示例，因为 SO 代码段编辑器是沙盒的，并且在运行 MutationObservers 时存在问题。

这里需要注意的一件事是 MutationObserver 速度并不快，如果页面中有大量 td 元素，您可能会发现性能受到影响。通过在父表上放置一个 MutationObserver 并让事件冒泡，您可能会得到更好的服务，例如 this .