javascript - document.getElementById 返回一个已知元素的 null - 为什么？

Question

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

document.getElementById('gbx3');

页面中有div一个 id 为“gbx3”的元素 - 那么它为什么返回 null 呢？什么会/可能导致这种情况？使用 Firefox Web 控制台也会发生同样的事情。

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

Answer 1

GMail 由框架组成。这个有效：

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

一般来说，如果你知道iframe元素的ID，contentDocument就可以使用该属性（前提是你没有同源问题，并且加载了文档）：

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

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'));
}