Document.querySelector 返回 null，直到使用 DevTools 检查元素

Question

我正在尝试创建一个 Chrome 扩展程序，用于查找 Facebook 上的“赞助”帖子并将其删除。

在执行此操作时，我注意到 Google Chrome 在 Facebook.com 上的这种相当奇怪的行为，其中对现有元素（在我的情况下）的某些类型的查询document.querySelector('a[href*="/ads/about"]');将返回null。但是，如果您“检查”-单击它们（使用检查工具或 CTRL+SHIFT+C），它们将显示在 DevTools 中，然后在控制台中再次运行查询将显示该元素。无需对页面进行任何滚动、移动、调整大小或执行任何操作。

使用上面的说明可以轻松复制这一点，但为了清楚起见，我制作了以下视频来准确显示奇怪的行为：

https://streamable.com/mxsf86

这是某种 dom 查询缓存问题吗？你有遇到过类似的事情吗？谢谢

编辑：问题现在已减少为查询返回，null直到元素悬停为止，并且它不再是与 DevTools 相关的问题。

Answer 1

正如已经注意到的，在某些鼠标事件发生之前，赞助商链接根本不在其位置。一旦鼠标事件发生，元素就会被添加到 DOM 中，据说这就是 Facebook 避免人们轻易抓取它的方法。

因此，如果您想要找到赞助商链接，那么您将需要执行以下操作

• 找出导致添加链接的确切事件是什么
• 进行实验，直到找出如何以编程方式生成该事件
• 实现一个爬行算法，在墙上滚动很长一段时间，然后引发给定的事件。那时您可能会获得许多赞助商链接

注意：赞助商链接是由公司付费的，如果他们的广告位被不感兴趣的机器人用完，他们不会很高兴。