我如何知道何时创建DOM元素？

Question

创建此元素后，我正在尝试获取特定QUnit DOM元素的引用。 我可以使用window.setTimeout来获取它，但是有一种事件驱动的方式来做到这一点吗？

我尝试了各种方法，但是只有最不令人满意的方法（ window.setTimeout ）才有效：

window.onload = function() {
    var qunitTestrunnerToolbar_element = document.getElementById("qunit-testrunner-toolbar");
    console.log("from window.onload: qunitTestrunnerToolbar_element: ", qunitTestrunnerToolbar_element);
};

返回null

document.addEventListener("DOMContentLoaded", function(event) {
   var qunitTestrunnerToolbar_element = document.getElementById("qunit-testrunner-toolbar");
    console.log("from document.addEventListener(DOMContentLoaded): qunitTestrunnerToolbar_element: ", qunitTestrunnerToolbar_element);
});

返回null

document.addEventListener("load", function(event) {
    var qunitTestrunnerToolbar_element = document.getElementById("qunit-testrunner-toolbar");
    console.log("from document.addEventListener(load): qunitTestrunnerToolbar_element: ", qunitTestrunnerToolbar_element);
});

永远不会执行

window.setTimeout(function() {
    var qunitTestrunnerToolbar_element = document.getElementById("qunit-testrunner-toolbar");
    console.log("from window.setTimeout: qunitTestrunnerToolbar_element: ", qunitTestrunnerToolbar_element);
}, 2000);

返回DOM引用

可以在此jsfiddle中添加代码。 请注意，小提琴仅记录一个成功的DOM引用。 其他人则无声无息。

这是在本地执行时的外观：

Answer 1

有一个DOMMutationObserver ，它允许您订阅对DOM的更改。

var mutationObserver = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var id = 'qunit-testrunner-toolbar',
            added = mutation.addedNodes,
            removed = mutation.removedNodes,
            i, length;

        for (i = 0, length = added.length; i < length; ++i) {
          if (added[i].id === id) {
            //  qunit-testrunner-toolbar was added
          }
        }

        for (i = 0, length = removed.length; i < length; ++i) {
          if (removed[i].id === id) {
            //  qunit-testrunner-toolbar was removed
          }
        }
      });
    });

mutationObserver.observe(target, {childList: true});

如果您需要停止监听更改（因为DOM的更改量可能很大；）），则可以简单地使用mutationObserver.disconnect() 。

如果#qunit-testrunner-toolbar不是添加的节点（而是其他结构的一部分），则上述检查将不起作用。 如果是这种情况，您可以使用类似以下内容的方法来替换added[i].id === id

if (added[i].querySelector('#qunit-testrunner-toolbar')) {
  // it was added
}

我至少应该提到现在已弃用的Mutation Events ，它似乎更易于实现，但速度缓慢且不准确。

document.addEventListener('DOMNodeInserted', function(e) {
  if (e.target.id === 'qunit-testrunner-toolbar') {
  }
});

诱人使用，但不要使用，因为它已被弃用。

Answer 2

您在JSFiddle的javascript中放入的所有内容都已经包装在onload事件中（因此window.onload将不再被触发-它已经被触发）。 将其更改为“ Javascript”->“ Load time”->“ No wrap-in <head>”，您将触发所有事件。

我如何知道何时创建DOM元素？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-20 10:09:09

解决方案2
1 2016-02-20 10:27:29

我如何知道何时创建DOM元素？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-20 10:09:09

解决方案2 1 2016-02-20 10:27:29

解决方案1
1 已采纳 2016-02-20 10:09:09

解决方案2
1 2016-02-20 10:27:29