有没有办法添加在任何元素添加到 DOM 之前运行但依赖于 body 元素的脚本？答案

【问题标题】：Is there a way to add a script that runs before any elements are added to the DOM but that relies on the body element?有没有办法添加在任何元素添加到 DOM 之前运行但依赖于 body 元素的脚本？
【发布时间】：2020-11-09 04:18:53
【问题描述】：

我正在尝试使用 MutationObserver 检查页面上的每个突变。

有没有一种简单的方法来解决以下问题，这样我就不必将它作为内联脚本包含在正文中（即包含在 <head> 中）？

问题在于我需要bodyList 变量才能开始监控添加到页面的项目。

显然我不能使用 onLoad 事件或任何东西，因为那时突变已经全部发生（除非在我不知道的事实之后有办法访问它们？）。

或者有没有办法将突变观察者附加到文档本身而不是元素？

我确信答案很简单，但我找不到任何涵盖此内容的文档。

<body>
<script>
//I want to move this inline script into the <head>
var bodyList = document.querySelector("body"),
            observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                   console.log("MUTATION", mutation)
                });
            });
    observer.observe(bodyList, {childList: true, subtree: true});
</script>
....all the HTML elements that I want to monitor

【问题讨论】：

标签： javascript mutation-observers

【解决方案1】：

您可以将观察者附加到 HTML 文档本身，等待 <body> 出现，然后将观察者附加到正文：

// In the <head>:
new MutationObserver((_, observer) => {
    const { body } = document;
    if (!body) return;
    // Remove this observer, since it's not needed anymore; body exists
    observer.disconnect();
    new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            console.log("MUTATION", mutation)
        });
    })
        .observe(body, { childList: true, subtree: true });
})
    .observe(document.documentElement, { childList: true });

【讨论】：

非常感谢，这是有道理的，我想如果没有内联脚本就没有办法做到这一点？也就是说，如果我没有初始化 MutationObserver，我就看不到以前的突变，我知道这似乎是一个愚蠢的问题，但对于 MutationObserver 来说，这是一个完全的菜鸟！
您可以将脚本链接到单独的文件中，如果这就是您的意思。如果您想完全不使用 <script> 标记来执行此操作，您可以使用内联处理程序，该处理程序会立即出错并运行脚本，就像 XSS 攻击一样，但这真的很奇怪。
不，这只是我的意思是它必须出现并在 <body> 之前执行才能捕获页面上的所有突变，如果我通过外部脚本添加它，这意味着我会只看到该脚本加载并执行后发生的突变？
即没有生成 window.mutations 对象（类似于 window.performance ，您可以稍后调用它并仍然获得所有内容）。
对不起，我不是很清楚。如果我将脚本链接到一个单独的文件中，那么我只会看到在该文件被下载、解析、编译和执行之后发生的突变。假设加载该文件需要 2 秒，我将无法访问在此之前发生的突变？