将DOM元素作为页面加载处理

Question

我正在寻找一种方法来在标题中放置一段简单的javascript，并让它挂钩页面加载，以便在每个标记或元素加载时可以查看它，测试特定的名称，id，或类，如果它符合要求，则执行一些操作。或者，在使用下载页面的每个新块更新DOM之后启动它。与此同时，该页面当然会继续加载，但我愿意进行调试以找出任何警告和问题。

如果浏览器为我做了过滤，真棒，否则我每次都要测试元素类型和名称，我明白在最坏的情况下会降低页面渲染速度。我主要关注Firefox，因为我正在寻找创建Greasemonkey脚本，但跨平台会很棒。

这样做的原因是为了防止加载具有错误样式的页面直到最后，然后让它跳转到新样式。我认为，许多其他在DOM完成之前无法使用的网站也可以从早期绑定的javascript中受益。

Answer 1

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

由于仅在现代浏览器上支持此功能，您可能还必须运行间隔计时器以定期检查新的DOM元素。你应该小心你的代码不是太低效。您可能想要假设，如果您上次检查时有15个元素，那么您只需要从第16个元素开始检查（在document.getElementsByTagName（'*'）搜索或其他内容）。

Answer 2

使用Greasemonkey和Firefox，您无法捕获一些第一个元素，并且您无法阻止元素EG <style>加载或解析（不停止整个页面加载）。< / p>

你可以做的最好的事情就是在加载之后立即删除元素，或者用以后的代码覆盖它的效果。

您可以了解这种方法 - 能够（大部分）在进入this answer时捕获DOM元素。

然而，“为了防止加载具有错误样式的页面直到最后，然后让它跳转到新样式”，更简单且无闪烁的方法是使用{{ 3}}覆盖违规风格。时尚，比Greasemonkey更快更容易，并在加载时实际影响页面。请记住，时尚的脚本是使用!important关键字的可接受的地方。

最后，对于外部加载的样式和脚本，您可以使用Stylish add-on轻松替换它们。