在DOM从以前的代码更新之后运行javascript代码

Question

我引入了一个google新闻提要，然后试图通过访问新创建的DOM元素来消除一些错误的格式。

var aryClassElements = document.getElementById('google-news').getElementsByTagName('div');
alert("Found "+aryClassElements.length+" divs in Google News");

但此警报显示为0。它还没有找到新创建的DOM元素。好了！

如果我在加载google新闻提要和向dom请求google-news中的div元素之间添加一个无关的警告("hello world")，它会找到20个div元素。我假设单击"OK“的用户响应时间会让DOM更新。

有没有什么普通的javascript (而不是jquery)可以达到同样的效果呢？

Tx！

Answer 1

要加载提要，我使用：

feed = new google.feeds.Feed(url);
feed.load(function(result) { [the function to add DOM elements here] }
[the function to read DOM elements here]

我只需要稍微调整一下：

feed = new google.feeds.Feed(url);
feed.load(function(result) { 
  [the function to add DOM elements here]
  [the function to read DOM elements here]
}

一切都很好！菜鸟的错误，谢谢你们为我指明了正确的方向。

Answer 2

如果google-news提供了回调钩子或伪事件，您可以附加函数，然后使用这些回调挂钩或伪事件。现在大多数javascript API都有它们。因此，我的第一个建议是阅读相关文档。

如果没有，那么您可以使用setTimeout轮询，比如说每秒一次，并在找到时执行您的函数：

function pollDOM () {
    var aryClassElements =
            document.
                getElementById('google-news').
                getElementsByTagName('div');

    if (aryClassElements.length) {
       // do stuff here;
    }
    else {
        setTimeout(pollDOM,1000);
    }
}
pollDOM();

Answer 3

使用setTimeout创建人为延迟。更好的方法是使用ajax加载内容，在ajax complete上设置新的html，然后尝试查找DOM元素。