document.getElementById对于已知元素返回null - 为什么？

Question

我正在使用Google Chrome的JavaScript控制台，我刚刚在查看Gmail页面并练习操纵DOM。但是，当我执行以下操作时，它返回null：

document.getElementById('gbx3');

页面中有一个id为'gbx3'的

元素，为什么返回null？是什么原因导致的？在使用Firefox Web控制台时也会出现相同的情况。

如果您尝试访问同一Gmail页面中的'id = gb'（这是主要的顶部工具栏），它将返回null。但是，如果您在google.com上访问此元素，它将返回该元素。

- Harry

---

我的最佳猜测是 gbx 在包含搜索结果的 iframe 中，而 document.getElementById 在与您的控制台相同的范围内起作用。 - Andreas Wong

Answer 1

GMail由框架组成。这个框架可以使用：

frames[3].document.getElementById('gbx3');

一般情况下，如果您知道 iframe 元素的 ID，则可以使用 contentDocument 属性（前提是没有同源问题，并且文档已经加载）：

document.getElementById('hist_frame').contentDocument.getElementById('gbx3');

- Rob W

Answer 2

根据我的评论：

我认为最有可能的情况是gbx在包含搜索结果的iframe中，而document.getElementById仅在与控制台相同的作用域内起作用。

您可以搜索所有框架以找到所需内容：

for(var i = 0; i < frames.length; i++) {
   var curDoc = frames[i].document;
   if(curDoc.getElementById('gbx')) console.log(curDoc.getElementById('gbx'));
}

- Andreas Wong

---

用一个 ) 来关闭 console.log 方法；)。 - Rob W