通过DOM元素进行Java脚本循环对于异步脚本而言是不可靠的

Question

我正在尝试从Google chrome扩展程序的内容脚本中循环浏览网页的DOM元素。问题是结果列表有时会有所不同，我怀疑这是因为脚本被标记为异步，但是由于该过程应以window.onload开头，这对我没有任何意义。有谁知道为什么会这样？编辑::我开始认为这可能是因为我将window.onload函数标记为异步的。那会是问题吗？

JavaScript代码如下。它为脚本添加了“ 2”，为iframe添加了“ 1”，为其他脚本添加了“ -1”（稍后将忽略“ -1”）。

async function exam(element){
        if (element.nodeName == 'SCRIPT'){
                return '2';
        }else if (element.nodeName == 'IFRAME'){
                return '1';
        }else{
                return '-1';
        }
}

async function domExam(element, list) {
        let res = await exam(element);
        if(res != '-1'){
            list.push(res);
        }
        let chNodes = element.children;
        if (chNodes.length > 0 ){
            for (let item of chNodes){
                list = await domExam(item, list);
            }
            return list;
        }else{
            return list;
        }
}

window.onload = async function(){
    list = await domExam(document, []);
    console.log("List::", list);
}  

Answer 1

处理onload事件的原因是，它可能在执行一个或多个脚本之前触发。

[页面中可能还有其他一些脚本正在异步执行或加载，并且AFAIK无法知道何时将要执行某些第三方脚本并以某种方式更改DOM。您必须假设DOM是并且将始终是可变的，并以这种方式使用它。

Answer 2

如另一个答案中所述，由于页面中的其他JavaScript，DOM可能随时更改

您可以利用MutationObserver来跟踪所有更改，并针对新的DOM再次运行您的功能（我建议您取消此操作，因为某些脚本可能会进行许多小的更改）