小编Gul*_*rYA的帖子

我想将 DOM 树扁平化为Array. 结果应包括根作为第一个条目。首选纯 JS 解决方案。实现这一目标最快的方法是什么？

HTML 结构示例：

<div class="tested-root">
    <span></span>
    <span></span>
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
</div>

预期的输出是： [div.tested-root, span, span, div, span, span, div, span, span]或类似的（这是 DFS，但对于这个问题来说并不重要）。

从以下三种方法中，哪种方法最快：

• querySelectorAll
• NodeIterator
• TreeWalker

我想检测将阴影附加到宿主元素的事件。

用例：用于MutationObserver观察任何 DOM 更改并对更改的内容进行后处理，作为绑定（捆绑）框架逻辑的一部分。

为什么我需要检测此事件？为了能够监视 ShadowDOM 中的变化，MutationObserver应该创建另一个并在 ShadowRoot 上设置 - 这工作得很好，所以唯一的问题是检测新创建的阴影。

不用说，这显然MutationObserver无法检测到attachShadow操作，尝试将所有选项标志设置为 true 。

注意：我在这个论坛上知道这个问题，但恕我直言，这不是完全相同的问题。

更新：

我将 @Supersharp 的答案标记为问题的答案，因为看起来代理本机attachShadow方法是目前观察此操作的唯一方法。

然而，与我们不是代理appendChild、removeChild、innerHTML/textContent等，而是依赖定义良好的MutationObserverAPI 的事实类似，在这种情况下，也必须有一种方法来实现相同的目标，而不会潜在地破坏本机 API 行为或追赶和管道任何其他可能的未来方式来附加阴影（并且可能也会删除？，已经有覆盖）等。

attachShadow我已经在MutationObserver 这里发布了支持提案。