观察 DOM 中的元素添加
您寻求一种机制，在 DOM 元素添加到网页时触发函数。鉴于您正在开发一个浏览器扩展并且无法访问网页的源代码，您想知道实现此目的的潜在方法。
当您考虑使用 setInterval() 轮询 DOM 时，这种方法不是最理想的，并且计算量大效率低下。幸运的是，有更好的替代方案。
在早期版本的浏览器中，可以使用突变事件来检测 DOM 更改。然而，这些事件已被弃用。因此，现在推荐的解决方案涉及利用 MutationObserver。
MutationObserver 提供了一种有效且高效的方法来观察 DOM 内的更改。它提供了一个简单但功能强大的 API，用于监视特定的突变，包括元素的添加或删除。与轮询不同，MutationObserver 不需要连续的 DOM 扫描，减少了计算开销。
要使用 MutationObserver，您可以实现类似于以下的功能：
<code class="javascript">function checkDOMChange() {
// Define the type of mutation you're interested in (e.g., element addition)
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
// Handle element addition here
});
});
// Select the target element you wish to monitor
var target = document.querySelector('body');
// Start observing the target element for specific mutations
observer.observe(target, { childList: true });
// Optionally, you can terminate the observer when no longer needed
// observer.disconnect();
}</code>通过实现 MutationObserver，您可以有效监控元素添加并相应地触发您想要的功能。这种方法消除了持续 DOM 轮询的需要，从而提高了性能和用户体验。
以上是如何使用 MutationObserver 检测 DOM 元素添加？的详细内容。更多信息请关注PHP中文网其他相关文章！
