如何确定动态创建的DOM元素是否已添加到DOM？ [英] How can I determine if a dynamically-created DOM element has been added to the DOM?

问题描述

根据规范 ，只有 BODY 和 FRAMESET 元素提供附加的onload事件，但是我想知道什么时候一个动态创建的DOM元素已被添加到JavaScript中的DOM中。

According to spec, only the BODY and FRAMESET elements provide an "onload" event to attach to, but I would like to know when a dynamically-created DOM element has been added to the DOM in JavaScript.

我目前使用的超先天启发式方法如下：

The super-naive heuristics I am currently using, which work, are as follows:

• 遍历元素的 parentNode 属性，直到找到最终祖先（即parentNode.parentNode.parentNode.etc直到parentNode为null）
  
  


• 如果最终祖先具有定义的非空值正文属性
  
  
  
  
  
  
  • 假设有问题的元素是dom的一部分
  
  
  • Traverse the parentNode property of the element back until I find the ultimate ancestor (i.e. parentNode.parentNode.parentNode.etc until parentNode is null)
    
    
  • If the ultimate ancestor has a defined, non-null body property
    
    
    • assume the element in question is part of the dom
    
    
    • 在100毫秒内重复这些步骤
    
    

    我以后怎么样或者确认我正在做的是足够的（再次，它在IE7和FF3中工作）或更好的解决方案，无论什么原因，我完全忘记了;也许其他属性我应该检查，等等。

    What I am after is either confirmation that what I am doing is sufficient (again, it is working in both IE7 and FF3) or a better solution that, for whatever reason, I have been completely oblivious to; perhaps other properties I should be checking, etc.

    编辑：我想要一个浏览器无关的方式来做这个，我不幸生活在一个浏览器的世界里，说，浏览器特定的信息是值得赞赏的，但请注意你知道哪个浏览器 有效。谢谢！

    I want a browser-agnostic way of doing this, I don't live in a one-browser world, unfortunately; that said, browser-specific information is appreciated, but please note which browser you know that it does work in. Thanks!

    推荐答案

    更新：对于有兴趣的人，这里是我终于使用的实现：

    UPDATE: For anyone interested in it, here is the implementation I finally used:

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

    我想要的是提供一种合成 onload 事件为DOM元素。这是这个功能（尽管我使用的东西略有不同，因为我正在使用它与 MochiKit ）：

    The reason I wanted this is to provide a way of synthesizing the onload event for DOM elements. Here is that function (although I am using something slightly different because I am using it in conjunction with 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);
       }
    }
    

    例如，此设置可以如下使用：

    For an example, this setup could be used as follows:

    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的答案 是因为getElementById技术只有在同一文档中才有效;我在页面上有一些iframe，页面之间以一些复杂的方式进行通信 - 当我尝试这个问题的时候，问题是它找不到元素，因为它是与其执行代码不同的文档的一部分。

    NOTE: the reason I ended up with this solution rather than Darryl's answer was because the getElementById technique only works if you are within the same document; I have some iframes on a page and the pages communicate between each other in some complex ways - when I tried this, the problem was that it couldn't find the element because it was part of a different document than the code it was executing in.

    这篇关于如何确定动态创建的DOM元素是否已添加到DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！