Warum jQuery oder eine DOM-Methoden wie getElementById nicht finden, das element?

Kurz und einfach:, Weil die Elemente, die Sie suchen, nicht im Dokument vorhanden sind (noch nicht).

Für den Rest der Antwort, die ich verwenden getElementById als Beispiel, aber das gleiche gilt für getElementsByTagName, querySelector und alle anderen die DOM-Methode, wählt Elemente.

Mögliche Gründe

Es gibt zwei Gründe, warum ein element nicht vorhanden:

1. Ein element mit der übergebenen ID wirklich nicht im Dokument vorhanden sind. Sie sollten überprüfen, dass die ID übergeben getElementById wirklich passt eine ID eines vorhandenen Elements in der (generierten) HTML-und dass Sie nicht falsch wird die ID (die IDs sind groß-und Kleinschreibung!).

   Übrigens, in der meisten modernen Browsern, die Umsetzung querySelector() und querySelectorAll() Methoden, CSS-notation wird verwendet, um ein element durch seine id zum Beispiel: document.querySelector('#elementID') im Gegensatz zu der Methode, mit der ein element wird ermittelt, indem seine id unter document.getElementById('elementID'); in der ersten der # Charakter ist wichtig, in der zweiten es würde dazu führen, dass das element nicht abgerufen werden.

2. Das element nicht existiert im moment rufen Sie getElementById.

Letztere Fall ist Recht Häufig. Browser Parsen und verarbeiten der HTML-von oben nach unten. Das bedeutet, dass jeder Aufruf eines DOM-element, das Auftritt, bevor das DOM-element wird in der HTML -, fehl.

Betrachten Sie das folgende Beispiel:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

Den div erscheint nach die script. Im moment wird das Skript ausgeführt, das element nicht existiert noch und getElementById zurück null.

jQuery

Das gleiche gilt für alle Selektoren in jQuery. jQuery wird nicht nach Elementen suchen, wenn Sie falsch Ihre Auswahl oder Sie versuchen, wählen Sie , bevor Sie tatsächlich existieren.

Einen zusätzlichen twist ist, wenn jQuery nicht gefunden, weil Sie geladen haben, das Skript ohne Protokoll-und ausführen aus dem Datei-system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

diese syntax wird verwendet, um das Skript zu laden via HTTPS auf eine Seite mit dem Protokoll https://und laden Sie die HTTP-version auf einer Seite mit Protokoll http://

Er hat die unglückliche Nebenwirkung der Versuch ist und nicht geladen werden kann file://somecdn.somewhere.com...

Lösungen

Bevor Sie einen Anruf tätigen, um getElementById (oder DOM-Methode für diese Angelegenheit) verwenden, stellen Sie sicher, dass die Elemente, auf die Sie zugreifen möchten, existiert, d.h. das DOM geladen ist.

Kann dies sichergestellt werden, indem einfach setzen Sie Ihre 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 auch den code direkt vor dem schließenden body-tag (</body>) (alle DOM-Elemente, die verfügbar sein wird an der Zeit das Skript ausgeführt wird).

Andere Lösungen hören auf die Last ^[MDN] oder DOMContentLoaded ^[MDN] Veranstaltungen. In diesen Fällen spielt es keine Rolle, wo im Dokument Sie den JavaScript-code, Sie müssen nur daran zu erinnern, um alle DOM-Verarbeitung code im Ereignis-Handler.

Beispiel:

window.onload = function() {
    //process DOM elements here
};

//or

//does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    //process DOM elements here
});

Finden Sie die Artikel an quirksmode.org für weitere Informationen über event-handling und browser-Unterschiede.

jQuery

Stellen Sie zunächst sicher, dass jQuery geladen wird, richtig. Mithilfe der browser-Entwickler-tools , um herauszufinden, ob die jQuery-Datei gefunden wurde und korrigieren Sie die URL, wenn es nicht (z.B. hinzufügen der http: oder https: Schema am Anfang, passen Sie den Pfad, etc.)

Hören load/DOMContentLoaded Veranstaltungen ist genau das, was jQuery ist das mit den .ready() ^[docs]. Alle Ihre jQuery-code wirkt sich auf das DOM-element sollte drin sein, dass event-handler.

In der Tat, die jQuery tutorial ausdrücklich:

Als fast alles, was wir tun, bei der Verwendung von jQuery liest oder manipuliert das DOM (document object model), müssen wir sicherstellen, dass wir beginnen, Termine etc. sobald das DOM bereit ist.

Dazu registrieren wir ein ready-Ereignis für das Dokument.

$(document).ready(function() {
   //do stuff when DOM is ready
});

Alternativ können Sie auch die Kurzform syntax:

$(function() {
    //do stuff when DOM is ready
});

Beide sind gleichwertig.

InformationsquelleAutor

Als @FelixKling darauf hingewiesen, das wahrscheinlichste Szenario ist, dass die Knoten, die Sie suchen, nicht vorhanden sind (noch nicht).

Allerdings, modernen Entwicklungsmethoden können oft manipulieren-Dokument Elemente außerhalb des Dokument-Baum entweder mit DocumentFragments oder einfach abnehmen/anbringen aktuelle Elemente direkt. Solche Techniken können verwendet werden, als Teil von JavaScript-templating oder zur Vermeidung einer übermäßigen repaint/reflow-Operationen, während die in Frage kommenden Elemente sind derzeit stark verändert.

Ähnlich, die neue "Shadow-DOM" - Funktionalität ausgerollt über moderne Browser ermöglicht es, Elemente auf dem Teil des Dokuments, aber nicht die Abfrage-ist in der Lage, die document.getElementById und alle seine Geschwister Methoden (querySelector, etc.). Dies geschieht zum Kapseln von Funktionalität und speziell verbergen.

Wieder, obwohl, ist es wahrscheinlich, dass das element, das Sie suchen, ist einfach (noch) nicht in das Dokument, und Sie sollten tun, wie Felix sagt. Allerdings sollte Ihnen auch bewusst sein, dass dies zunehmend nicht der einzige Grund, dass Sie ein element sein könnte, nicht aufzufinden (entweder temporär oder permanent).

InformationsquelleAutor Nathan Bubna

Wenn das script die Reihenfolge der Ausführung ist nicht das Problem, eine weitere mögliche Ursache für das problem ist, dass das element nicht ausgewählt wird, richtig:

• getElementById erfordert den übergebenen string, der die ID verbatim, und sonst nichts. Wenn Sie das Präfix der übergebene string mit einem #, und die ID nicht mit einem # nichts ausgewählt werden:

  <div id="foo"></div>

  //Error, selected element will be null:
  document.getElementById('#foo')
  //Fix:
  document.getElementById('foo')

• Ebenso für getElementsByClassName nicht Präfix der übergebene string mit einem .:

  <div class="bar"></div>

  //Error, selected element will be undefined:
  document.getElementsByClassName('.bar')[0]
  //Fix:
  document.getElementsByClassName('bar')[0]

• Mit querySelector, querySelectorAll, und jQuery, um mit einem element mit einer bestimmten Klasse name, setzen Sie einen . direkt vor der Klasse. In ähnlicher Weise entspricht ein element mit einer bestimmten ID, setzen Sie einen # direkt vor der ID:

  <div class="baz"></div>

  //Error, selected element will be null:
  document.querySelector('baz')
  $('baz')
  //Fix:
  document.querySelector('.baz')
  $('.baz')

  Die Regeln hier sind, in den meisten Fällen mit denen identisch, die für CSS-Selektoren, und im detail zu sehen hier.

• Groß - /Kleinschreibung und Rechtschreibung nicht egal für alle der oben genannten. Wenn die groß-und Kleinschreibung unterscheidet, oder die Schreibweise anders ist, wird das element nicht ausgewählt werden:

  <div class="result"></div>

  //Error, selected element will be null:
  document.querySelector('.results')
  $('.Result')
  //Fix:
  document.querySelector('.result')
  $('.result')

InformationsquelleAutor CertainPerformance