Почему jQuery или метод DOM, такой как getElementById, не находит элемент?
Проблема с поиском элементов в DOM
Каковы возможные причины, по которым методы document.getElementById
, $("#id")
или другие селекторы DOM / jQuery не находят элементы?
Примеры проблем включают:
- Неявное отсутствие привязки обработчика событий в jQuery.
- Методы "геттеры" jQuery (
.val()
,.html()
,.text()
) возвращаютundefined
. - Стандартные методы DOM возвращают
null
, что приводит к различным ошибкам:
Uncaught TypeError: Cannot set property '...' of null
Uncaught TypeError: Cannot set properties of null (setting '...')
Uncaught TypeError: Cannot read property '...' of null
Uncaught TypeError: Cannot read properties of null (reading '...')
Наиболее распространенные формы ошибок:
Uncaught TypeError: Cannot set property 'onclick' of null
Uncaught TypeError: Cannot read property 'addEventListener' of null
Uncaught TypeError: Cannot read property 'style' of null
Помогите разобраться с этой проблемой! Почему методы не находят элементы?
3 ответ(ов)
Причины, по которым селекторы на основе id не работают
- Элемент/DOM с указанным id ещё не существует.
- Элемент существует, но он не зарегистрирован в DOM (в случае, если HTML-узлы добавляются динамически из Ajax-ответов).
- Существует более одного элемента с одинаковым id, что вызывает конфликт.
Решения
- Попробуйте получить доступ к элементу после его объявления или используйте, например,
$(document).ready();
. - Для элементов, приходящих из Ajax-ответов, используйте метод
.bind()
jQuery. В более старых версиях jQuery для этого использовался.live()
. - Используйте инструменты (например, плагин Web Developer для браузеров), чтобы найти дублирующиеся id и удалить их.
Как указал @FelixKling, наиболее вероятный сценарий заключается в том, что искомые узлы просто не существуют (пока).
Тем не менее, современные методы разработки часто позволяют манипулировать элементами документа вне древовидной структуры документа, используя DocumentFragment или просто отвязывая и повторно привязывая существующие элементы. Такие техники могут применяться в рамках шаблонизации на JavaScript или для того, чтобы избежать избыточных операций перерисовки/перепотока во время значительных изменений элементов.
Точно так же новая функциональность "Shadow DOM", внедряемая в современных браузерах, позволяет элементам быть частью документа, но делает их недоступными для запросов с помощью document.getElementById и всех его аналогичных методов (например, querySelector и т.д.). Это делается для инкапсуляции функциональности и ее специфического скрытия.
Тем не менее, скорее всего, элемент, который вы ищете, просто не находится (пока) в документе, и вам стоит поступить так, как советует Felix. Однако имейте в виду, что это не единственная причина, по которой элемент может быть недоступен для поиска (как временно, так и навсегда).
Я использовал Apache Tapestry, и в моем случае ни один из вышеуказанных ответов не помог. В конце концов, я выяснил, что ошибка была вызвана тем, что я использовал одинаковые значения для атрибутов 'id' и 't:id'. Надеюсь, это поможет.
Получение выбранного текста из выпадающего списка (select) с помощью jQuery
Как проверить, скрыт ли элемент в jQuery?
Эквивалент document.createElement в jQuery?
Как выбрать элемент по имени с помощью jQuery?
Как установить/удалить куки с помощью jQuery?