如何确定是否已将动态创建的 DOM 元素添加到 DOM？

Question

According to spec，只有BODY 和FRAMESET 元素提供了一个“onload”事件来附加，但我想知道动态创建的 DOM 元素何时被添加到 JavaScript 中的 DOM。

我目前使用的超朴素启发式方法如下：

• 向后遍历元素的 parentNode 属性，直到找到最终的祖先（即 parentNode.parentNode.parentNode.etc 直到 parentNode 为空）
  
  
• 如果最终祖先具有已定义的非空 body 属性
  
  
  • 假设有问题的元素是 dom 的一部分
• 其他
  
  
  • 在 100 毫秒内再次重复这些步骤

我所追求的要么是确认我所做的是足够的（同样，它在 IE7 和 FF3 中都有效），要么是一个更好的解决方案，无论出于何种原因，我完全没有注意到；也许我应该检查其他属性等。

---

编辑：我想要一种与浏览器无关的方法，不幸的是，我并不生活在一个浏览器的世界中；也就是说，感谢您提供特定于浏览器的信息，但请注意您知道它在哪个浏览器中确实工作。谢谢！

Answer 1

更新：对于任何对此感兴趣的人，这是我最终使用的实现：

function isInDOMTree(node) {
   // If the farthest-back ancestor of our node has a "body"
   // property (that node would be the document itself), 
   // we assume it is in the page's DOM tree.
   return !!(findUltimateAncestor(node).body);
}
function findUltimateAncestor(node) {
   // Walk up the DOM tree until we are at the top (parentNode 
   // will return null at that point).
   // NOTE: this will return the same node that was passed in 
   // if it has no ancestors.
   var ancestor = node;
   while(ancestor.parentNode) {
      ancestor = ancestor.parentNode;
   }
   return ancestor;
}

我想要这个的原因是提供一种为 DOM 元素合成 onload 事件的方法。这是那个函数（虽然我使用的东西略有不同，因为我将它与MochiKit结合使用）：

function executeOnLoad(node, func) {
   // This function will check, every tenth of a second, to see if 
   // our element is a part of the DOM tree - as soon as we know 
   // that it is, we execute the provided function.
   if(isInDOMTree(node)) {
      func();
   } else {
      setTimeout(function() { executeOnLoad(node, func); }, 100);
   }
}

例如，此设置可按如下方式使用：

var mySpan = document.createElement("span");
mySpan.innerHTML = "Hello world!";
executeOnLoad(mySpan, function(node) { 
   alert('Added to DOM tree. ' + node.innerHTML);
});

// now, at some point later in code, this
// node would be appended to the document
document.body.appendChild(mySpan);

// sometime after this is executed, but no more than 100 ms after,
// the anonymous function I passed to executeOnLoad() would execute

希望对某人有用。

注意：我最终选择此解决方案而不是 Darryl's answer 的原因是 getElementById 技术仅在您位于同一文档中时才有效；我在页面上有一些 iframe，并且页面之间以一些复杂的方式相互通信 - 当我尝试这个时，问题是它找不到元素，因为它是与它正在执行的代码不同的文档的一部分.

Answer 2

最直接的答案是使用 Chrome、Firefox (Gecko)、Internet Explorer、Opera 和 Safari 支持的 Node.contains 方法。这是一个例子：

var el = document.createElement("div");
console.log(document.body.contains(el)); // false
document.body.appendChild(el);
console.log(document.body.contains(el)); // true
document.body.removeChild(el);
console.log(document.body.contains(el)); // false

理想情况下，我们会使用document.contains(el)，但这在 IE 中不起作用，所以我们使用document.body.contains(el)。

不幸的是，您仍然需要轮询，但是检查一个元素是否在文档中非常简单：

setTimeout(function test() {
  if (document.body.contains(node)) {
    func();
  } else {
    setTimeout(test, 50);
  }
}, 50);

如果您对在页面中添加一些 CSS 感到满意，这是另一种使用动画检测节点插入的巧妙技术：http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Answer 3

只需使用element.ownerDocument，而不是遍历 DOM 树直到文档元素。 见这里：https://developer.mozilla.org/en-US/docs/DOM/Node.ownerDocument 并这样做：

element.ownerDocument.body.contains(element)

你很好。

Answer 4

你能不能不做document.getElementById('newElementId'); 看看是否返回true。如果没有，就像你说的，等待 100 毫秒再试一次？

Answer 5

MutationObserver 用于检测元素何时添加到 DOM。 现在所有现代浏览器（Chrome 26+、Firefox 14+、IE11）都广泛支持 MutationObservers 、Edge、Opera 15+ 等）。

这是一个简单的示例，说明如何使用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!

只要在document 中添加或删除任何节点，observer 事件处理程序就会触发。在处理程序内部，我们然后执行contains 检查以确定myElement 现在是否在document 中。

您无需遍历存储在 mutations 中的每个 MutationRecord，因为您可以直接对 myElement 执行 document.contains 检查。

要提高性能，请将 document 替换为 DOM 中将包含 myElement 的特定元素。

Answer 6

您可以查询 document.getElementsByTagName("*").length 或创建自定义 appendChild 函数，如下所示：

var append = function(parent, child, onAppend) {
  parent.appendChild(child);
  if (onAppend) onAppend(child);
}

//inserts a div into body and adds the class "created" upon insertion
append(document.body, document.createElement("div"), function(el) {
  el.className = "created";
});

更新

应要求，将我的 cmets 中的信息添加到我的帖子中

今天在 Ajaxian 的 Peppy 库上有一个 comment by John Resig，这似乎表明他的 Sizzle 库可能能够处理 DOM 插入事件。我很好奇是否会有代码来处理IE

根据轮询的想法，我了解到某些元素属性在元素被附加到文档之前不可用（例如 element.scrollTop），也许您可​​以轮询它而不是执行所有 DOM 遍历.

最后一件事：在 IE 中，可能值得探索的一种方法是使用 onpropertychange 事件。我认为将其附加到文档中必然会触发至少一个属性的事件。

Answer 7

在一个完美的世界中，您可以挂钩突变事件。我怀疑它们即使在标准浏览器上也能可靠地工作。听起来您已经实现了一个突变事件，因此您可以添加它以使用本机突变事件，而不是在支持这些事件的浏览器上进行超时轮询。

我已经看到 DOM-change 实现通过比较 document.body.innerHTML 和上次保存的 .innerHTML 来监控变化，这并不完全优雅（但有效）。由于您最终要检查是否已添加特定节点，因此最好只检查每个中断。

我能想到的改进是使用.offsetParent 而不是.parentNode，因为它可能会将一些父母排除在您的循环之外（请参阅cmets）。或者在除 IE 之外的所有设备上使用 compareDocumentIndex() 并为 IE 测试 .sourceIndex 属性（如果节点不在 DOM 中，则应为 -1）。

这也可能有帮助：X browser compareDocumentIndex implementaion by John Resig。

Answer 8

您想要DOMNodeInserted 事件（或DOMNodeInsertedIntoDocument）。

编辑：IE 完全有可能不支持这些事件，但我现在无法测试。

Answer 9

这是从 jQuery 代码中提取的问题的另一个解决方案。 以下函数可用于检查节点是否附加到 DOM 或是否“断开连接”。

功能已断开连接（节点）{ 返回！节点 || !node.parentNode || node.parentNode.nodeType === 11; }

一个nodeType === 11 定义了一个DOCUMENT_FRAGMENT_NODE，它是一个没有连接到文档对象的节点。

有关更多信息，请参阅 John Resig 的以下文章： http://ejohn.org/blog/dom-documentfragments/

Answer 10

var finalElement=null; 

我在一个循环中构建 dom 对象，当循环在最后一个循环时，然后创建 lastDomObject：

 finalElement=lastDomObject; 

离开循环：

while (!finalElement) { } //this is the delay... 

下一个动作可以使用任何新创建的 dom 对象。第一次尝试就成功了。

Answer 11

IE 中不支持 DOMNodeInserted 或 DOMNodeInsertedIntoDocument 事件。 DOM 的 IE [only] 特性中缺少的另一个功能是 compareDocumentPosition 函数，该函数旨在实现其名称所暗示的功能。

至于建议的解决方案，我认为没有更好的解决方案（除非你做了一些肮脏的把戏，比如覆盖原生 DOM 成员实现）

另外，更正问题的标题：动态创建的元素从创建的那一刻起就是 DOM 的一部分，它可以附加到文档片段或另一个元素，但它可能不会附加到文档.

我也认为您描述的问题不是您遇到的问题，这个问题看起来是您问题的潜在解决方案之一。你能详细解释一下用例吗？