javascript - MutationObserver 未检测到额外的表行

Question

我正在尝试使用 MutationObserver 检查是否有新行被添加到表中，我在下面得到的代码似乎适用于 H2 元素，但是当我将其更改为表行时，console.log 没有' 输出到控制台，如果我检查表，则正在添加 TR。有人有什么想法吗？我不明白为什么它不会观察到表格行被添加

var list = document.getElementById("testtable");

var MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver || 
    window.MozMutationObserver;

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

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

var element = ("tr");


setInterval(
    function(){ 
        $(list).append("<h2>" + "THIS IS A TEST" + "</h2>");
        //This doesn't work
        //$(list).append("<tr>" + "<td>" + "<h2>" + "THIS IS A TEST" + "</h2>" + "</td>" + "</tr>");
    }, 
    2000);

这是一个工作 fiddle :http://jsfiddle.net/ggwb2ejy/

Answer 1

您需要将subtree 选项设置为true

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

当您添加 tr 时，它不会直接添加到 table 中，而是添加到 tbody 元素中，因此实际上是一个子树观察到的元素被修改。要观察子树中的任何变化，您需要在配置中设置 subtree: true

演示:Fiddle