javascript - 监听 HTMLCollection 的变化（或达到类似的效果）

Question

我需要创建一个像这样工作的简单工具提示库：

每个具有特定属性组合（如 class="tooltip"、data-tooltip-text="some text"）的 DOM 元素都会在悬停时自动显示工具提示（包含来自 data attr 的文本）。

这种行为必须通过外部 DOM 操作持续存在。我真的很喜欢为此使用HTMLcollection的想法，因为它的“实时”特性，因为每次 DOM 更改都迭代整个 DOM 听起来可能非常苛刻。

现在我很想观看/收听集合并在每次更改时运行一个序列（遍历节点，查看它们是否有监听器，如果没有，则添加它）。

我该怎么做呢？watch和observe方法似乎（如果我理解正确的话）能够做到这一点，但它们现在已被弃用。MDN 说Proxy涵盖了大多数用例，但它是否涵盖了我的（我还没有找到让它工作的方法）？或者还有其他我想念的方式吗？

那么MutationObserver呢？我认为深入观察整个应用程序并通过 querySelectorAll 重复获取一个新的 NodeList 对每一次更改都要求太高（该库应该在 React 应用程序上运行）。通过 React 将 HTMLCollection（作为值）动态提交到 DOM 中，然后（浅浅地）使用 MutationObserver 监听更改可能会起作用，但我怀疑这也是一个好主意。

标签： javascriptperformancetooltipwatchmutation-observers