如何检测页面上是否加载了 dom 元素

Question

我有一个单页应用程序，其中 div 和 class "abc" 正在动态加载。我想运行仅在该特定元素及其所有子元素都已加载到 DOM 之后才执行脚本。我不想使用一次又一次调用该函数的计时器。我该怎么做。这可能与变异观察者有关，但我不明白如何使用它。

Answer 1

$(document).on('DOMNodeInserted', '.abc', function() {

});

这将等到 DOM 元素准备就绪，然后运行您的代码。

Answer 2

变异观察者的例子

var target = document.querySelector('.class');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }

// pass in the target node, as well as the observer options
observer.observe(target, config);

因此对于目标元素的每个突变此代码 console.log(mutation.type); 将被执行

如何检测页面上是否加载了 dom 元素

How to detect whether an dom element has loaded on the page

javascript

jquery

knockout.js

single-page-application

mutation-observers