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-reference

代码可以在this 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不是添加的节点（而是另一个结构的一部分），则上述检查将不起作用。如果是这种情况，您可以用{/ p>之类的内容替换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” - ＆gt; “加载时间” - ＆gt; “没有包装 - ＆lt; head＆gt;”你会把你所有的事件都解雇了。

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

2 个答案: