document.getElementById coming back with null for a known element - why?

firefox, gmail, google-chrome, javascript

Solution

GMail is composed of frames. This one works:

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

In general, if you know the ID of the iframe element, the `contentDocument` property can be used (provided that you don't have same-origin problems, and the document is loaded):

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

Problem

I'm using the Google Chrome JavaScript console and I was just looking at the Gmail page and just practicing manipulating the DOM. However, when I do the following it just comes back as null: ``` document.getElementById('gbx3'); ``` There is a `div` element in the page that has an id of 'gbx3' - so why is it returning null? What would/could be causing this? The same thing occurs using the Firefox web console. If you try and access the `'gb'` id (this is the main top toolbar) in the same Gmail page it comes back null, but if you access this element at google.com it will come back with the element.

Original source