Javascript函数document.querrySelectorAll在Chrome上运行起来很奇怪

Question

我正在尝试使用 document.querySelectorAll 函数通过Chrome开发人员控制台获取元素，关键是它不会返回任何元素，但我会看到元素选项卡上的元素。< / p>

我想知道某人是否遇到过类似的问题。我要改变浏览器配置的一些选项吗？

顺便说一句，Chrome版本在MAC上为63。另外，我正在处理的页面有一个iframe html标签，这可能是造成这种奇怪行为的原因吗？

这是我从开发者控制台获得的

这是我从元素标签中得到的：

Answer 1

没有任何浏览器设置会影响document.querySelectorAll()。它是非常核心的功能。

您提到iframe，因此很可能是混淆的根源。使用iframes时，您无法直接从外层访问或修改iframe的内容。在外层，它基本上是一个黑盒子。这是由于浏览器的沙盒操作。

例外情况是，iframe和主页位于同一个域（例如http://example.com/page1和http://example.com/page2）。

如果他们都在同一个域中，那么您可以使用contentWindow访问它的窗口：

const iframe = document.querySelector('iframe');
iframe.contentWindow // the window for the iframe

从那里，您可以访问其文档，并针对该文档运行querySelectorAll()：

iframe.contentWindow.document.querySelectorAll('div');

这将获得iframe中的所有div元素。