Short: Because the element you are looking for does not exist in the document yet.

For the rest of this answer I will use for example getElementById, but the same applies to getElementsByTagName, querySelector, and any other DOM method that selects elements.

possible reason

Three reasons why the element may not exist:

1. The element with the passed ID does not exist in the document. You should double check that the ID you pass to getElementById actually matches the ID of an existing element in the (generated) HTML, and that you didn't misspell the ID (IDs are case sensitive!).

   If you use getElementById, make sure you only provide the ID of the element (e.g. document.getElemntById("the-id ")). If you are using a method that accepts a CSS selector (for example, querySelector), be sure to include # before the ID to indicate that you are looking for the ID (for example, document.querySelector(" #the-id")). You can not use # with getElementById and must use it with querySelector and similar of. Also note that an id attribute containing . characters is bad if the ID is contained within a CSS identifier (e.g. .) (but works), you have to escape these when using querySelector (document.querySelector("#the\\.id"))) , but use getElementById ( >document.getElementById("the.id")).

2. The element did not exist when you called getElementById.

3. Even though you can see the element on the page, the element is not in the document you are querying because it is in an iframe (which is its own document). When you search for documents that contain elements in iframe, these elements are not searched.

If the problem is cause 3 (located in an iframe or similar file), you need to look at the document in the iframe rather than the parent document, perhaps by getting the iframe element and use its contentDocument attribute to access its document (same origin only). The remainder of this answer addresses the first two reasons.

The second reason - that it hasn't appeared yet - is common. Browsers parse and process HTML from top to bottom. This means that any calls to the DOM element that occur before the DOM element appears in the HTML will fail.

Consider the following example:

sssccc

div appears after script. When the script is executed, the element does not yet exist and getElementById will return null.

jQuery

The same applies to all jQuery selectors. If you misspell your selectors, or if you try to select them before they actually exist, jQuery won't find them.

sssccc

file://somecdn.somewhere.com... but failing

solution

getElementById (or any DOM method for that matter), make sure that the element you want to access exists, i.e. the DOM is loaded.

after the corresponding DOM element

sssccc

The element you are trying to find is not in the DOM when your script runs.

The location of a script that relies on the DOM can have a profound impact on its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM, and scripts are (usually) executed when they are encountered. This means the order matters. Typically, scripts cannot find elements that appear later in the markup because these elements have not yet been added to the DOM.

Consider the following tags; Script #1 cannot find

sssccc
test div
sssccc