在页面加载时处理DOM元素

Process DOM elements as page loads

本文关键字：处理 DOM 元素加载更新时间：2023-09-26

我正在寻找一种方法，把一块纯javascript的头，并有它挂钩的页面加载，以便每个标签或元素加载它可以查看它，测试一个特定的名称，id，或类，如果它符合要求，然后执行一些操作。或者，让它在DOM被下载页面的每个新块更新之后触发。在此期间，页面当然会继续加载，但我愿意进行调试以找出任何警告和问题。

如果浏览器为我做过滤，那太棒了，否则我将不得不每次都测试元素类型和名称，我知道在最坏的情况下这会减慢页面呈现速度。我主要关心的是Firefox，因为我正在寻找创建Greasemonkey脚本，但跨平台将是伟大的。

这样做的原因是为了避免加载一个带有错误样式的页面，直到最后，然后让它跳转到新的样式。我认为，许多其他直到DOM完成才可用的站点也可以从早期绑定的javascript中受益。

您需要挂钩到DOMNodeInserted事件。此事件冒泡，允许您通过在文档级别注册事件来监视整个文档。

由于这只在现代浏览器上支持，您可能还必须运行间隔计时器来定期检查新的DOM元素。您应该注意不要让这里的代码效率太低。您可能想要假设，如果上次检查有15个元素，那么您只需要从第16个元素开始检查(在document.getElementsByTagName('*')搜索或其他东西中)。

使用Greasemonkey和Firefox，您无法捕获一些第一个元素，并且您无法做任何事情来阻止元素(例如<style>)加载或解析(除非停止整个页面加载)。

最好是在元素加载后立即删除它，或者用以后的代码覆盖它的效果。

您可以在这个答案中了解这种方法——能够(大部分)捕获进入的DOM元素。

然而，"为了避免加载一个带有错误样式的页面直到最后，然后让它跳转到新样式"，一个更简单和无闪烁的方法是使用Stylish附加组件覆盖违规样式。时尚，比Greasemonkey更快，更容易，并且在加载时影响页面。只要记住，在style脚本中使用!important关键字是可以接受的。

最后，对于外部加载的样式和脚本，您可以轻松地用Fiddler实用程序替换它们。