6

Почему jQuery или метод DOM, такой как getElementById, не находит элемент?

15

Проблема с поиском элементов в 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 ответ(ов)

0

Причины, по которым селекторы на основе id не работают

  1. Элемент/DOM с указанным id ещё не существует.
  2. Элемент существует, но он не зарегистрирован в DOM (в случае, если HTML-узлы добавляются динамически из Ajax-ответов).
  3. Существует более одного элемента с одинаковым id, что вызывает конфликт.

Решения

  1. Попробуйте получить доступ к элементу после его объявления или используйте, например, $(document).ready();.
  2. Для элементов, приходящих из Ajax-ответов, используйте метод .bind() jQuery. В более старых версиях jQuery для этого использовался .live().
  3. Используйте инструменты (например, плагин Web Developer для браузеров), чтобы найти дублирующиеся id и удалить их.
0

Как указал @FelixKling, наиболее вероятный сценарий заключается в том, что искомые узлы просто не существуют (пока).

Тем не менее, современные методы разработки часто позволяют манипулировать элементами документа вне древовидной структуры документа, используя DocumentFragment или просто отвязывая и повторно привязывая существующие элементы. Такие техники могут применяться в рамках шаблонизации на JavaScript или для того, чтобы избежать избыточных операций перерисовки/перепотока во время значительных изменений элементов.

Точно так же новая функциональность "Shadow DOM", внедряемая в современных браузерах, позволяет элементам быть частью документа, но делает их недоступными для запросов с помощью document.getElementById и всех его аналогичных методов (например, querySelector и т.д.). Это делается для инкапсуляции функциональности и ее специфического скрытия.

Тем не менее, скорее всего, элемент, который вы ищете, просто не находится (пока) в документе, и вам стоит поступить так, как советует Felix. Однако имейте в виду, что это не единственная причина, по которой элемент может быть недоступен для поиска (как временно, так и навсегда).

0

Я использовал Apache Tapestry, и в моем случае ни один из вышеуказанных ответов не помог. В конце концов, я выяснил, что ошибка была вызвана тем, что я использовал одинаковые значения для атрибутов 'id' и 't:id'. Надеюсь, это поможет.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь