我如何知道 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);
};

returns 空

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

returns 空

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

returns DOM-引用

代码可以fiddled at this jsfiddle。请注意，fiddle 仅记录一个成功的 DOM-reference。其他人不知何故沉默了。

这是在本地执行时的样子：

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 元素何时创建？

How do I know when a DOM-element is created?

javascript

dom

onload

addeventlistener

qunit