Krótko i prosto: ponieważ elementy, których szukasz, nie istnieją w dokumencie (jeszcze).
Dla pozostałej części tej odpowiedzi użyję getElementByIdjako przykładu, ale to samo dotyczy getElementsByTagName, querySelectori każda inna metoda elementów DOM że wybiera.
Możliwe przyczyny
Istnieją dwa powody, dla których element może nie istnieć:
Element z przekazanym identyfikatorem naprawdę nie istnieje w dokumencie. Powinieneś dokładnie sprawdzić, czy identyfikator, który przekazujesz, getElementByIdnaprawdę pasuje do identyfikatora istniejącego elementu w (wygenerowanym) kodzie HTML i czy nie wpisałeś błędnej nazwy (w identyfikatorach rozróżniana jest wielkość liter !).
Nawiasem mówiąc, w większości współczesnych przeglądarek , które implementują querySelector()i querySelectorAll()metody, notacja w stylu CSS jest używana do pobierania elementu przez jego id, na przykład: document.querySelector('#elementID')w przeciwieństwie do metody, za pomocą której element jest pobierany przez jego idpod document.getElementById('elementID'); w pierwszej #postać jest niezbędna, w drugiej prowadziłaby do nieodzyskiwania elementu.
Element nie istnieje w momencie, w którym dzwonisz getElementById.
Ten drugi przypadek jest dość powszechny. Przeglądarki parsują i przetwarzają HTML od góry do dołu. Oznacza to, że każde wywołanie elementu DOM, które nastąpi przed pojawieniem się tego elementu DOM w kodzie HTML, zakończy się niepowodzeniem.
Rozważ następujący przykład:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
divPojawia się poscript . W momencie wykonania skryptu element jeszcze nie istnieje i getElementByIdpowróci null.
jQuery
To samo dotyczy wszystkich selektorów z jQuery. jQuery nie znajdzie elementów, jeśli źle wpisałeś selektor lub próbujesz je wybrać, zanim one faktycznie istnieją .
Dodatkową niespodzianką jest to, że jQuery nie został znaleziony, ponieważ skrypt został załadowany bez protokołu i działa z systemu plików:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
ta składnia służy do umożliwienia załadowania skryptu przez HTTPS na stronie z protokołem https: // oraz do załadowania wersji HTTP na stronie z protokołem http: //
Ma niefortunny efekt uboczny próby załadowania i niepowodzenia file://somecdn.somewhere.com...
Rozwiązania
Przed wykonaniem wywołania getElementById(lub jakiejkolwiek innej metody DOM w tym zakresie) upewnij się, że istnieją elementy, do których chcesz uzyskać dostęp, tzn. Że DOM jest załadowany.
Można to zapewnić, umieszczając JavaScript za odpowiednim elementem DOM
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
w takim przypadku możesz również wstawić kod tuż przed zamykającym tagiem body ( </body>) (wszystkie elementy DOM będą dostępne w momencie wykonywania skryptu).
Inne rozwiązania obejmują nasłuchiwanie zdarzeń load [MDN] lub DOMContentLoaded [MDN] . W takich przypadkach nie ma znaczenia, gdzie w dokumencie umieszczasz kod JavaScript, musisz tylko pamiętać o umieszczeniu całego kodu przetwarzania DOM w procedurach obsługi zdarzeń.
Przykład:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Więcej informacji na temat obsługi zdarzeń i różnic w przeglądarkach można znaleźć w artykułach na quirksmode.org .
jQuery
Najpierw upewnij się, że jQuery jest poprawnie załadowany. Skorzystaj z narzędzi programistycznych przeglądarki, aby dowiedzieć się, czy plik jQuery został znaleziony, a jeśli nie, popraw adres URL (np. Dodaj schemat http:lub https:na początku, dostosuj ścieżkę itp.)
Słuchanie load/ DOMContentLoaded events jest dokładnie tym, co robi jQuery z .ready() [docs] . Cały kod jQuery, który wpływa na element DOM, powinien znajdować się w module obsługi zdarzeń.
W rzeczywistości samouczek jQuery wyraźnie stwierdza:
Ponieważ prawie wszystko, co robimy podczas korzystania z jQuery, czyta lub manipuluje modelem obiektowym dokumentu (DOM), musimy upewnić się, że zaczniemy dodawać zdarzenia itp., Gdy tylko DOM będzie gotowy.
Aby to zrobić, rejestrujemy gotowe wydarzenie dla dokumentu.
$(document).ready(function() {
// do stuff when DOM is ready
});
Alternatywnie możesz również użyć składni skróconej:
$(function() {
// do stuff when DOM is ready
});
Oba są równoważne.