使用突变观测器检测添加到DOM的元素

Detect added element to DOM with Mutation Observer

本文关键字：DOM 元素 添加 检测 突变 观测器      更新时间：2024-03-26

在拖动事件之后，我将向DOM添加一些元素。我需要检测这个元素以及添加这个元素的时刻。我使用突变观察者，但有问题，代码：

var targetNodes = $('.mvly');
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver (mutationHandler);
var obsConfig = { childList: true, characterData: true, attributes: true, subtree: true };
targetNodes.each(function(){
    myObserver.observe(this, obsConfig);
} );
function mutationHandler (mutationRecords) {
    mutationRecords.forEach ( function (mutation) {
        if (typeof mutation.addedNodes == "object") {
            console.log('test');
        }
    });
}

有人能帮忙吗。

以下是一个简单的示例，说明如何使用MutationObserver来侦听元素添加到DOM中的情况。

为了简洁起见，我使用jQuery语法来构建节点并将其插入DOM中。

var myElement = $("<div>hello world</div>")[0];
var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});
observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});
$("body").append(myElement); // console.log: It's in the DOM!

您不需要对存储在mutations中的每个MutationRecord进行迭代，因为您可以直接对myElement执行document.contains检查。

相关文章：