Короткий і простий: оскільки шуканих елементів не існує в документі (поки).
В протягом решти цього відповіді я буду використовувати в getElementByIdякості прикладу, але те ж саме відноситься і до getElementsByTagName, querySelectorі будь-який інший метод , який вибирає DOM - елементів.
Можливі причини
Є дві причини, чому елемент може не існувати:
Елемента з переданим ідентифікатором дійсно не існує в документі. Вам слід двічі перевірити, чи ідентифікатор, який ви передаєте, getElementByIdдійсно відповідає ідентифікатору існуючого елемента в (згенерованому) HTML-коді та чи не ви написали неправильно ідентифікатор (ідентифікатори залежать від регістру !)
Між іншим, в більшості сучасних браузерів , які реалізують querySelector()і querySelectorAll()методи, CSS-стиль позначення використовується для вилучення елемента в відповідно з його id, наприклад: document.querySelector('#elementID'), на відміну від способу , з допомогою якого елемент витягується його idзаступником 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>) (всі елементи 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
});
Обидва рівнозначні.