Kurz und einfach: Weil die gesuchten Elemente (noch) nicht in dem Dokument vorhanden sind.
Für den Rest dieser Antwort werde ich Folgendes verwenden getElementById für Beispiele, aber das Gleiche gilt für getElementsByTagName , querySelector und jede andere DOM-Methode, die Elemente auswählt.
Mögliche Gründe
Es gibt drei Gründe, warum ein Element nicht vorhanden sein könnte:
-
Ein Element mit der übergebenen ID existiert in dem Dokument nicht wirklich. Sie sollten überprüfen, ob die ID, die Sie an getElementById wirklich mit einer ID eines bestehenden Elements im (generierten) HTML übereinstimmt und dass Sie nicht falsch buchstabiert die ID (IDs sind Groß- und Kleinschreibung !).
Wenn Sie Folgendes verwenden getElementById sicher sein, dass Sie nur unter Angabe der ID des Elements (z.B., document.getElemntById("the-id") ). Wenn Sie eine Methode verwenden, die einen CSS-Selektor akzeptiert (wie querySelector ), stellen Sie sicher, dass Sie die # vor der ID, um anzuzeigen, dass Sie nach einer ID suchen (z. B., document.querySelector("#the-id") ). Sie müssen no verwenden Sie die # mit getElementById et debe Verwenden Sie es mit querySelector und ähnliches. Beachten Sie auch, dass, wenn die ID Zeichen enthält, die nicht in CSS-Bezeichner (wie zum Beispiel ein . ; id Attribute, die . Zeichen sind eine schlechte Praxis, aber gültig), müssen Sie diese bei der Verwendung von querySelector ( document.querySelector("#the\\.id") )), aber nicht bei der Verwendung von getElementById ( document.getElementById("the.id") ).
-
Das Element ist nicht vorhanden zur Zeit Sie rufen getElementById .
-
Das Element ist nicht in dem Dokument, das Sie abfragen, obwohl Sie es auf der Seite sehen können, da es sich in einer iframe (das ein eigenes Dokument ist). Elemente in iframes werden nicht durchsucht, wenn Sie das Dokument durchsuchen, in dem sie enthalten sind.
Wenn das Problem Grund 3 ist (es befindet sich in einem iframe oder ähnliches), müssen Sie das Dokument in der iframe und nicht das übergeordnete Dokument, vielleicht indem man die iframe Element und unter Verwendung seines contentDocument Eigenschaft, um auf sein Dokument zuzugreifen (nur gleiche Herkunft). Der Rest dieser Antwort befasst sich mit den ersten beiden Gründen.
Der zweite Grund - er ist nicht da dennoch - ist durchaus üblich. Die Browser analysieren und verarbeiten den HTML-Code von oben nach unten. Das bedeutet, dass jeder Aufruf eines DOM-Elements, der erfolgt, bevor dieses DOM-Element in der HTML-Datei erscheint, fehlschlägt.
Betrachten Sie das folgende Beispiel:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
En div erscheint nach ザ script . Zu dem Zeitpunkt, zu dem das Skript ausgeführt wird, existiert das Element nicht dennoch y getElementById wird zurückgegeben null .
jQuery
Das Gleiche gilt für alle Selektoren mit jQuery. jQuery findet keine Elemente, wenn Sie falsch buchstabiert Ihr Selektor oder Sie versuchen, sie auszuwählen bevor sie tatsächlich existieren .
Eine zusätzliche Schwierigkeit besteht darin, dass jQuery nicht gefunden wird, weil Sie das Skript ohne Protokoll geladen haben und es vom Dateisystem aus ausführen:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
diese Syntax wird verwendet, damit das Skript auf einer Seite mit dem Protokoll https:// über HTTPS geladen wird und auf einer Seite mit dem Protokoll http:// die HTTP-Version geladen wird
Es hat den unglücklichen Nebeneffekt, dass der Versuch, die file://somecdn.somewhere.com...
Lösungen
Bevor Sie einen Anruf tätigen bei getElementById (oder jede andere DOM-Methode), vergewissern Sie sich, dass die Elemente, auf die Sie zugreifen möchten, vorhanden sind, d.h. dass das DOM geladen ist.
Dies kann gewährleistet werden, indem Sie einfach Ihr JavaScript nach das entsprechende DOM-Element
<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> ) (alle DOM-Elemente sind zum Zeitpunkt der Ausführung des Skripts verfügbar).
Andere Lösungen sind das Anhören der load [MDN] o DOMContentLoaded [MDN] Ereignisse. In diesen Fällen spielt es keine Rolle, wo im Dokument Sie den JavaScript-Code platzieren, Sie müssen nur daran denken, den gesamten DOM-Verarbeitungscode in die Event-Handler zu setzen.
Beispiel:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Bitte beachten Sie die Artikel auf quirksmode.org für weitere Informationen über Ereignisbehandlung und Browserunterschiede.
jQuery
Stellen Sie zunächst sicher, dass jQuery richtig geladen ist. Verwenden Sie die Entwicklerwerkzeuge des Browsers um herauszufinden, ob die jQuery-Datei gefunden wurde, und korrigieren Sie die URL, falls dies nicht der Fall ist (fügen Sie z. B. die http: o https: Schema am Anfang, Anpassung des Pfades usw.)
Das Zuhören der load / DOMContentLoaded Ereignisse ist genau das, was jQuery mit .ready() [docs] . Ihr gesamter jQuery-Code, der sich auf das DOM-Element auswirkt, sollte sich in diesem Event-Handler befinden.
In der Tat, die jQuery-Anleitung ausdrücklich fest:
Da fast alles, was wir mit jQuery tun, das Document Object Model (DOM) liest oder manipuliert, müssen wir sicherstellen, dass wir mit dem Hinzufügen von Ereignissen usw. beginnen, sobald das DOM bereit ist.
Zu diesem Zweck registrieren wir ein Bereitschaftsereignis für das Dokument.
$(document).ready(function() {
// do stuff when DOM is ready
});
Alternativ dazu können Sie auch die Kurzsyntax verwenden:
$(function() {
// do stuff when DOM is ready
});
Beide sind gleichwertig.
