Kurz und einfach: Weil die Elemente, nach denen Sie suchen, (noch) nicht im Dokument vorhanden sind.
Für den Rest dieser Antwort wird ich getElementByIdals Beispiel, aber das gleiche gilt für getElementsByTagName, querySelectorund andere Verfahren , dass DOM wählt Elemente.
Mögliche Gründe
Es gibt zwei Gründe, warum ein Element möglicherweise nicht vorhanden ist:
Ein Element mit der übergebenen ID ist im Dokument wirklich nicht vorhanden. Sie sollten überprüfen, ob die ID, an die Sie übergeben, getElementByIdwirklich mit der ID eines vorhandenen Elements im (generierten) HTML übereinstimmt und ob Sie die ID nicht falsch geschrieben haben (bei IDs wird zwischen Groß- und Kleinschreibung unterschieden !).
Im übrigen wird in der Mehrzahl der modernen Browser , die Umsetzung querySelector()und querySelectorAll()Methoden, CSS-Notation verwendet wird , ein Element von seinen abzurufen id, zum Beispiel: document.querySelector('#elementID')wie das Verfahren im Gegensatz von dem ein Element durch seine abgerufen wird idunter document.getElementById('elementID'); im ersten #Fall ist das Zeichen wesentlich, im zweiten Fall würde es dazu führen, dass das Element nicht abgerufen wird.
Das Element ist zum Zeitpunkt Ihres Aufrufs nicht vorhanden getElementById.
Der letztere Fall ist ziemlich häufig. Browser analysieren und verarbeiten den HTML-Code von oben nach unten. Das bedeutet, dass jeder Aufruf eines DOM-Elements, der vor dem Erscheinen dieses DOM-Elements im HTML erfolgt, fehlschlägt.
Betrachten Sie das folgende Beispiel:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
Das diverscheint nach dem script. Im Moment ist das Skript ausgeführt wird, wird das Element nicht existiert noch und getElementByIdwird zurückkehren null.
jQuery
Gleiches gilt für alle Selektoren mit jQuery. jQuery findet keine Elemente, wenn Sie Ihren Selektor falsch geschrieben haben oder versuchen, sie auszuwählen, bevor sie tatsächlich vorhanden sind .
Eine zusätzliche Wendung ist, wenn jQuery nicht gefunden wird, weil Sie das Skript ohne Protokoll geladen haben und vom Dateisystem ausgeführt werden:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
Diese Syntax wird verwendet, um das Laden des Skripts über HTTPS auf eine Seite mit dem Protokoll https: // und das Laden der HTTP-Version auf eine Seite mit dem Protokoll http: // zu ermöglichen
Es hat den unglücklichen Nebeneffekt, dass versucht wird und nicht geladen wird file://somecdn.somewhere.com...
Lösungen
Stellen Sie vor dem Aufrufen getElementById(oder einer anderen DOM-Methode) sicher, dass die Elemente vorhanden sind, auf die Sie zugreifen möchten, dh das DOM wird geladen.
Dies kann sichergestellt werden, indem Sie einfach Ihr JavaScript nach dem entsprechenden DOM-Element setzen
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
In diesem Fall können Sie den Code auch direkt vor dem schließenden Body-Tag ( </body>) einfügen (alle DOM-Elemente sind zum Zeitpunkt der Ausführung des Skripts verfügbar).
Andere Lösungen umfassen das Abhören der Ereignisse load [MDN] oder DOMContentLoaded [MDN] . In diesen Fällen spielt es keine Rolle, wo in dem Dokument Sie den JavaScript-Code platzieren. Sie müssen lediglich daran denken, den gesamten DOM-Verarbeitungscode in die Ereignishandler einzufügen.
Beispiel:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Weitere Informationen zur Ereignisbehandlung und zu Browserunterschieden finden Sie in den Artikeln auf quirksmode.org .
jQuery
Stellen Sie zunächst sicher, dass jQuery ordnungsgemäß geladen ist. Verwenden Sie die Entwicklertools des Browsers, um herauszufinden, ob die jQuery-Datei gefunden wurde, und korrigieren Sie die URL, wenn dies nicht der Fall ist (z. B. fügen Sie das Schema http:oder https:am Anfang hinzu, passen Sie den Pfad an usw.).
Das Abhören der load/ DOMContentLoaded -Ereignisse ist genau das, was jQuery mit .ready() [docs] macht . Der gesamte jQuery-Code, der sich auf das DOM-Element auswirkt, sollte sich in diesem Ereignishandler befinden.
Tatsächlich heißt es im jQuery-Tutorial explizit:
Da fast alles, was wir bei der Verwendung von jQuery tun, das Dokumentobjektmodell (DOM) liest oder bearbeitet, müssen wir sicherstellen, dass wir Ereignisse usw. hinzufügen, sobald das DOM bereit ist.
Dazu registrieren wir ein fertiges Ereignis für das Dokument.
$(document).ready(function() {
// do stuff when DOM is ready
});
Alternativ können Sie auch die Kurzsyntax verwenden:
$(function() {
// do stuff when DOM is ready
});
Beide sind gleichwertig.