Коротко и просто: потому что искомые элементы не существуют в документе (пока).
В течение оставшейся части этого ответа я буду использовать в getElementByIdкачестве примера, но то же самое относится и к getElementsByTagName, querySelectorи любой другой метод , который выбирает DOM - элементов.
Возможные причины
Есть две причины, почему элемент может не существовать:
Элемент с переданным идентификатором действительно не существует в документе. Вы должны дважды проверить, что идентификатор, который вы передаете, getElementByIdдействительно совпадает с идентификатором существующего элемента в (сгенерированном) HTML, и что вы не ошиблись идентификатором (идентификаторы чувствительны к регистру !).
Между прочим, в большинстве современных браузеров , которые реализуют querySelector()и querySelectorAll()методы, нотация в стиле CSS используется для извлечения элемента его id, например: document.querySelector('#elementID')в отличие от метода, которым элемент извлекается его idunder document.getElementById('elementID'); в первом #символ важен, во втором - элемент не будет извлечен.
Элемент не существует в тот момент, когда вы звоните getElementById.
Последний случай довольно распространен. Браузеры анализируют и обрабатывают HTML сверху вниз. Это означает, что любой вызов элемента DOM, который происходит до того, как этот элемент DOM появится в HTML, не будет выполнен.
Рассмотрим следующий пример:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
divПоявляется послеscript . На данный момент скрипт выполняется, то элемент не существует еще и getElementByIdвернется null.
JQuery
То же самое относится ко всем селекторам с jQuery. jQuery не найдет элементы, если вы неправильно написали свой селектор или пытаетесь выбрать их до того, как они реально появятся .
Добавленный поворот - это когда jQuery не найден, потому что вы загрузили скрипт без протокола и работаете из файловой системы:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
этот синтаксис позволяет скрипту загружаться через HTTPS на страницу с протоколом https: // и загружать версию HTTP на страницу с протоколом http: //
Это имеет неприятный побочный эффект попытки и не удается загрузить file://somecdn.somewhere.com...
Решения
Перед тем, как сделать вызов getElementById(или любой другой метод DOM), убедитесь, что элементы, к которым вы хотите получить доступ, существуют, то есть загружен DOM.
Это можно сделать, просто поместив свой JavaScript после соответствующего элемента DOM
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
в этом случае вы также можете поместить код непосредственно перед закрывающим тегом body ( </body>) (все элементы DOM будут доступны во время выполнения скрипта).
Другие решения включают прослушивание событий load [MDN] или DOMContentLoaded [MDN] . В этих случаях не имеет значения, где в документе вы размещаете код JavaScript, вы просто должны помнить, чтобы поместить весь код обработки DOM в обработчики событий.
Пример:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Пожалуйста, смотрите статьи на quirksmode.org для получения дополнительной информации об обработке событий и различиях браузера.
JQuery
Сначала убедитесь, что jQuery загружен правильно. Используйте инструменты разработчика браузера, чтобы узнать, был ли найден файл jQuery, и исправьте URL-адрес, если его нет (например, добавьте схему http:или https:в начале, измените путь и т. Д.)
Прослушивание событий load/ DOMContentLoaded- это именно то, что делает jQuery с .ready() [docs] . Весь ваш код jQuery, который влияет на элемент DOM, должен быть внутри этого обработчика событий.
На самом деле, учебник по jQuery прямо заявляет:
Поскольку почти все, что мы делаем при использовании jQuery, читает или манипулирует объектной моделью документа (DOM), нам необходимо убедиться, что мы начинаем добавлять события и т. Д., Как только DOM будет готов.
Для этого мы регистрируем готовое событие для документа.
$(document).ready(function() {
// do stuff when DOM is ready
});
В качестве альтернативы вы также можете использовать сокращенный синтаксис:
$(function() {
// do stuff when DOM is ready
});
Оба эквивалентны.