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

Question

我正在尝试使用 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

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

有没有办法添加在任何元素添加到 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?

javascript

mutation-observers