Решение error TypeError: null в $().val(), .html(), .text()

Быстрый ответ

Прежде всего, убедитесь, что DOM полностью загружен. Если вы программируете на чистом JavaScript, располагайте ваш скрипт в конце тела документа или оборачивайте его в document.addEventListener('DOMContentLoaded', function(){ /* ваш код */ }). Для jQuery поместите код в $(function(){ /* ваш код */ });. Удостоверьтесь, что у элемента правильный идентификатор и он не дублируется где-то ещё.

Чистый JavaScript:

// DOM готов? Поехали!
document.addEventListener('DOMContentLoaded', () => {
    console.log(document.getElementById('uniqueElement')); // проверка в консоли сразу после выполнения.
});

jQuery:

// Всё просто при использовании jQuery!
$(function() {
    console.log($('#uniqueElement')); // Если вывод показывает пустоту, значит что-то пошло не так.
});

Размещение скриптов допускает работу с деревом DOM для поиска элементов и назначения обработчиков событий. Для скриптов, взаимодействующих с HTML-элементами, применяйте атрибут defer или используйте подход с JavaScript-модулями, которые задерживают выполнение скрипта. В случаях с динамическим контентом применяйте методы в духе on() для эффективного делегирования событий.

Размещение скриптов и выбор времени выполнения

Использование атрибутов defer и async

Атрибут defer применяется к внешним файлам JavaScript, благодаря чему код исполняется только после полной загрузки документа HTML. Помните, что defer не действует на inline-скрипты. Скрипты с атрибутом async также выполняются после загрузки, но без сохранения последовательности исполнения.

Подробнее об этом расскажет наш спикер на видео

Преимущества JavaScript-модулей

Для структурирования кода и отложенной загрузки используйте современные ES6-модули (<script type="module">). Не нужно тратить время на ожидание полной загрузки DOM!

Отложенное обработка событий

Применяйте jQuery.on или addEventListener для элементов, которые добавляются в DOM асинхронно или динамически после обработки событий DOMContentLoaded или load, либо делегируйте их обработку от статического элемента.

Работа с динамично изменяемым контентом

Если контент страницы изменяется после её загрузки с помощью JavaScript или AJAX, делегируйте события к элементам, оставшимся неизменными на странице.

Правильное определение контекста для Iframe

Для взаимодействия с элементами, расположенными внутри iframe, обращайтесь к их contentDocument или contentWindow.document, при этом учтите политику одного источника.

Убедитесь в уникальности ID и точности использования селекторов jQuery

Удостоверьтесь, что идентификаторы элементов не повторяются — getElementById вернет первый найденный элемент с данным ID. Для выбора элемента по ID в jQuery используйте префикс "#".

Shadow DOM и его "загадочность"

Для взаимодействия с компонентами, использующими Shadow DOM, помните, что стандартные методы поиска не подойдут из-за их изолированности. Для доступа к ним используйте shadowRoot.

Отладка: выявление и исправление типичных ошибок

Избегайте дублирования идентификаторов

Идентичные ID у разных элементов являются ошибкой. Выявите и исправьте их при помощи инструментов разработчика.

Муки выбора при работе с элементами, которые могут не существовать

Проверьте ваши селекторы на опечатки и удостоверьтесь, что целевые элементы действительно существуют. Если вы изменяете DOM, ваши действия не должны привести к их исчезновению.

Обработка null как профессионал

Если методы поиска элементов возвращают null, внимательно обработайте это значение, чтобы избежать возможных ошибок в вашем коде.

Целеуверенность при работе с Iframes

При обращении к элементам внутри iframe всегда используйте правильный контекст, чтобы не нарушить политику одного источника.

Привязка событий к элементам, динамично добавляемым через AJAX

Для привязки обработчиков к элементам, которые динамически добавляются через AJAX, используйте метод .bind() в jQuery. В более старых версиях подойдет .live().

Визуализация

Имеет смысл держать в памяти следующую таблицу, когда вы работаете с jQuery или getElementById:

| Задача: Найти элемент | Статус документа | Результат  |
| --------------------- | ---------------- | ---------- |
| getElementById('id')  | Загружен 🌐            | Успешно ✓  |
| $('#id') с jQuery     | Загружен 🌐            | Успешно ✓  |
| getElementById('id')  | Загружается... ⏳   | Ошибка ✗   |
| $('#id') с jQuery     | Загружается... ⏳   | Ошибка ✗   |

Полезные материалы

1. Document: метод getElementById() – Web API | MDN — подробное описание метода getElementById.
2. Селекторы | Документация по API jQuery — всё, что нужно знать о селекторах jQuery.
3. Введение в DOM – Web API | MDN — простое объяснение того, что такое DOM.
4. javascript – Свойство 'innerHTML' не может быть установлено для null – Stack Overflow — обсуждение типичных проблем, связанных с getElementById, возвращающим null.
5. Основы манипулирования DOM в чистом JavaScript (без jQuery) — SitePoint — статья о работы с DOM без использования jQuery.
6. Поиск: getElement, querySelector — учебный материал по поиску элементов в DOM.
7. Node: свойство textContent – Web API | MDN — описание свойства textContent, применяемого при работе с элементами DOM.