Why does jQuery or a DOM method such as getElementById not find the element?
The element you were trying to find wasn’t in the DOM when your script ran.
The position of your DOM-reliant script can have a profound effect upon its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM and scripts are (generally) executed as they're encountered. This means that order matters. Typically, scripts can't find elements which appear later in the markup because those elements have yet to be added to the DOM.
Consider the following markup; script #1 fails to find the <div> while script #2 succeeds:
<script> console.log("script #1:", document.getElementById("test")); // null</script><div id="test">test div</div><script> console.log("script #2:", document.getElementById("test")); // <div id="test" ...</script>So, what should you do? You've got a few options:
Option 1: Move your script
Given what we've seen in the example above, an intuitive solution might be to simply move your script down the markup, past the elements you'd like to access. In fact, for a long time, placing scripts at the bottom of the page was considered a best practice for a variety of reasons. Organized in this fashion, the rest of the document would be parsed before executing your script:
<body> <button id="test">click me</button> <script> document.getElementById("test").addEventListener("click", function() { console.log("clicked:", this); }); </script></body><!-- closing body tag -->While this makes sense, and is a solid option for legacy browsers, it's limited and there are more flexible, modern approaches available.
Option 2: The defer attribute
While we did say that scripts are, "(generally) executed as they're encountered," modern browsers allow you to specify a different behavior. If you're linking an external script, you can make use of the defer attribute.
[
defer, a Boolean attribute,] is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firingDOMContentLoaded.
This means that you can place a script tagged with defer anywhere, even the <head>, and it should have access to the fully realized DOM.
<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script><button id="test">click me</button>Just keep in mind...
defercan only be used for external scripts, i.e.: those having asrcattribute.- be aware of browser support, i.e.: buggy implementation in IE < 10
Option 3: Modules
Depending upon your requirements, you may be able to utilize JavaScript modules. Among other important distinctions from standard scripts (noted here), modules are deferred automatically and are not limited to external sources.
Set your script's type to module, e.g.:
<script type="module"> document.getElementById("test").addEventListener("click", function(e) { console.log("clicked: ", this); });</script><button id="test">click me</button>Option 4: Defer with event handling
Add a listener to an event which fires after your document has been parsed.
DOMContentLoaded event
DOMContentLoaded fires after the DOM has been completely constructed from the initial parse, without waiting for things like stylesheets or images to load.
<script> document.addEventListener("DOMContentLoaded", function(e){ document.getElementById("test").addEventListener("click", function(e) { console.log("clicked:", this); }); });</script><button id="test">click me</button>Window: load event
The load event fires after DOMContentLoaded and additional resources like stylesheets and images have been loaded. For that reason, it fires later than desired for our purposes. Still, if you're considering older browsers like IE8, the support is nearly universal. Granted, you may want a polyfill for addEventListener().
<script> window.addEventListener("load", function(e){ document.getElementById("test").addEventListener("click", function(e) { console.log("clicked:", this); }); });</script><button id="test">click me</button>jQuery's ready()
DOMContentLoaded and window:load each have their caveats. jQuery's ready() delivers a hybrid solution, using DOMContentLoaded when possible, failing over to window:load when necessary, and firing its callback immediately if the DOM is already complete.
You can pass your ready handler directly to jQuery as $(handler), e.g.:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script> $(function() { $("#test").click(function() { console.log("clicked:", this); }); });</script><button id="test">click me</button>Option 5: Event Delegation
Delegate the event handling to an ancestor of the target element.
When an element raises an event (provided that it's a bubbling event and nothing stops its propagation), each parent in that element's ancestry, all the way up to window, receives the event as well. That allows us to attach a handler to an existing element and sample events as they bubble up from its descendants... even from descendants added after the handler was attached. All we have to do is check the event to see whether it was raised by the desired element and, if so, run our code.
Typically, this pattern is reserved for elements which don't exist at load-time or to avoid attaching a large amount of duplicate handlers. For efficiency, select the nearest reliable ancestor of the target element rather than attaching to document.
Native JavaScript
<div id="ancestor"><!-- nearest ancestor available to our script --> <script> document.getElementById("ancestor").addEventListener("click", function(e) { if (e.target.id === "descendant") { console.log("clicked:", e.target); } }); </script> <button id="descendant">click me</button></div>jQuery's on()
jQuery makes this functionality available through on(). Given an event name, a selector for the desired descendant, and an event handler, it will resolve your delegated event handling and manage your this context:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="ancestor"><!-- nearest ancestor available to our script --> <script> $("#ancestor").on("click", "#descendant", function(e) { console.log("clicked:", this); }); </script> <button id="descendant">click me</button></div>
Short and simple: Because the elements you are looking for do not exist in the document (yet).
For the remainder of this answer I will use getElementById for examples, but the same applies to getElementsByTagName, querySelector, and any other DOM method that selects elements.
Possible Reasons
There are three reasons why an element might not exist:
An element with the passed ID really does not exist in the document. You should double check that the ID you pass to
getElementByIdreally matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).If you're using
getElementById, be sure you're only giving the ID of the element (e.g.,document.getElemntById("the-id")). If you're using a method that accepts a CSS selector (likequerySelector), be sure you're including the#before the ID to indicate you're looking for an ID (e.g.,document.querySelector("#the-id")). You must not use the#withgetElementById, and must use it withquerySelectorand similar. Also note that if the ID has characters in it that aren't valid in CSS identifiers (such as a.;idattributes containing.characters are poor practice, but valid), you have to escape those when usingquerySelector(document.querySelector("#the\\.id"))) but not when usinggetElementById(document.getElementById("the.id")).The element does not exist at the moment you call
getElementById.The element isn't in the document you're querying even though you can see it on the page, because it's in an
iframe(which is its own document). Elements iniframesaren't searched when you search the document that contains them.
If the problem is reason 3 (it's in an iframe or similar), you need to look through the document in the iframe, not the parent document, perhaps by getting the iframe element and using its contentDocument property to access its document (same-origin only). The rest of this answer addresses the first two reasons.
The second reason — it's not there yet — is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.
Consider the following example:
<script> var element = document.getElementById('my_element');</script><div id="my_element"></div>The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.
jQuery
The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.
An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://
It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...
Solutions
Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.
This can be ensured by simply putting your JavaScript after the corresponding DOM element
<div id="my_element"></div><script> var element = document.getElementById('my_element');</script>in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).
Other solutions include listening to the load [MDN] or DOMContentLoaded [MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.
Example:
window.onload = function() { // process DOM elements here};// or// does not work IE 8 and belowdocument.addEventListener('DOMContentLoaded', function() { // process DOM elements here});Please see the articles at quirksmode.org for more information regarding event handling and browser differences.
jQuery
First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)
Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() [docs]. All your jQuery code that affects DOM element should be inside that event handler.
In fact, the jQuery tutorial explicitly states:
As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.
To do this, we register a ready event for the document.
$(document).ready(function() {
// do stuff when DOM is ready});Alternatively you can also use the shorthand syntax:
$(function() { // do stuff when DOM is ready});Both are equivalent.
If the element you are trying to access is inside an iframe and you try to access it outside the context of the iframe this will also cause it to fail.
If you want to get an element in an iframe you can find out how here.