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

Question

我正在拉入 Google 新闻提要，然后尝试通过访问新创建的 DOM 元素来消除一些格式错误。

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

但是此警报显示 0。它尚未找到新创建的 DOM 元素。确认!

如果我在加载 google news feed 和向 dom 询问 google-news 中的 div 元素之间添加一个无关的警报(“hello world”)，它会找到 20 个 div 元素。我假设用户单击“确定”的响应时间可以让 DOM 更新。

是否有一些普通的 javascript(不是 jquery)可以实现相同的结果？

发送!

Answer 1

如果 google-news 提供回调 Hook 或伪事件，您可以附加函数来使用它们。现在大多数 javascript API 都有它们。所以我的第一个建议是阅读它的文档。

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

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

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