为何querySelector与querySelectorAll无法遍历iframe内部元素？

现象对比 #

以下代码可以正常获取iframe内匹配的元素：

parent.document.getElementById('iframeID').contentWindow.document.querySelectorAll('*[id^="elementId"]');

但直接调用iframe元素的querySelectorAll却无法找到目标元素：

parent.document.getElementById('iframeID').querySelectorAll('*[id^="elementId"]');

参考文档说明 #

Element的querySelectorAll()方法会返回一个静态（非实时）的NodeList，包含调用该方法的元素的后代中匹配指定选择器组的元素。

疑问与解答 #

你可能会疑惑：既然contentWindow和内部document是iframe相关的对象，为什么调用iframe元素的querySelectorAll时，不会像div嵌套例子那样递归遍历到这些内容？

比如下面的div嵌套场景，调用div1的querySelectorAll('div')能拿到所有子div：

<div id="div1">
  <div id="div2">
    <div id="div3">
      <div id="div4">
        <div id="div5">

        </div>
      </div>
    </div>
  </div>
</div>

<script>
console.log(document.getElementById("div1").querySelectorAll('div'));
</script>

核心原因在于iframe的特殊性：

• contentWindow不是iframe元素的DOM后代节点，它是iframe元素提供的一个API属性，指向的是iframe内部独立的窗口对象，不属于父页面的DOM树结构。
• querySelectorAll的遍历范围仅限当前DOM上下文内的DOM子节点（也就是HTML标签里嵌套的元素），而iframe内部的document是完全独立的另一个DOM环境，和父页面的DOM树是分离的，不会被父页面的querySelectorAll遍历到。
• 你举的div例子里，所有div都属于同一个DOM上下文，是标准的父子DOM节点关系，所以querySelectorAll能递归找到所有后代；但要访问iframe内的元素，必须通过contentWindow.document主动进入这个独立的DOM上下文，再执行查询操作。

内容的提问来源于stack exchange，提问作者geeheeb