Dom getelementbyid не работает

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

каковы возможные причины для document.getElementById , $(«#id») или любой другой метод DOM / селектор jQuery не находит элементы?

пример проблемы включают в себя:

jQuery молча не удается связать обработчик событий и стандартный метод DOM, возвращающий null в результате ошибки:

Uncaught TypeError: не удается установить свойство ‘. ‘of null

6 ответов

элемент, который вы пытались найти не в дом когда ваш скрипт побежал.

позиция вашего DOM-зависимого скрипта может оказать глубокое влияние на его поведение. Браузеры разбирают HTML-документы сверху донизу. Элементы добавляются в DOM, и скрипты (как правило) выполняются по мере их появления. это означает, что порядок имеет значение. как правило, скрипты не можете найти элементы, которые появляются позже в разметке, потому что эти элементы еще предстоит добавить в DOM.

рассмотрим следующую разметку; скрипт #1 не может найти

Итак, что вы должны делать? У вас есть несколько вариантов:

Вариант 1: переместить скрипт

переместите скрипт дальше вниз по странице, непосредственно перед закрывающим тегом body. Организованный таким образом, остальная часть документа анализируется до того, как сценарий исполнено:

_{Примечание: размещение скриптов внизу обычно считается лучшие практики.}

2: в jQuery ready()

отложить сценарий, пока дом был полностью разобран, используя ready() :

_{Примечание: Вы можете просто привязать к DOMContentLoaded или window.onload но у каждого есть свои предостережения. в jQuery ready() предлагает гибридное решение.}

Вариант 3: Делегирование Событий

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

когда элемент вызывает событие (при условии, что это клокоча событие и ничто не остановит ее распространение), каждый родитель в родословной этого элемента также получает событие. Это позволяет присоединить обработчик к существующему элементу и выборке событий по мере их появления из его потомков. даже те, которые добавляются после присоединения обработчика. Все, что нам нужно сделать, это проверить событие, было ли оно вызвано желаемым элементом, и если да, запустите наш код.

jQuery on() выполняет эту логику для нас. Мы просто предоставляем имя события, селектор для желаемого потомок и обработчик событий:

_{Примечание: как правило, эта модель предназначена для элементов, которые не существовали во время загрузки или чтобы избежать прикрепления большого количества обработчиков. Стоит также отметить, что в то время как я приложил обработчик document (для демонстративных целей), вы должны выбрать ближайшего надежного предка.}

Вариант 4: defer атрибут

Для справки, вот код из этой внешний скрипт:

<sub>Примечание: конечно кажется как волшебная пуля но важно знать о предостережениях.
1. defer можно использовать только для внешних скриптов, т. е. с .
2. будьте в курсе поддержка браузеров, т. е.: багги реализация в IE</sub>

коротко и просто: потому что элементы, которые вы ищете, не существует в документе (пока).

для остальной части этого ответа я буду использовать getElementById как пример, но то же самое относится к getElementsByTagName , querySelector и любой другой метод DOM, который выбирает элементы.

Возможные Причины

есть две причины, почему элемент не может exist:

элемент с переданным идентификатором действительно не существует в документе. Вы должны дважды проверить, что ID вы передаете getElementById действительно соответствует идентификатору существующего элемента в (сгенерированном) HTML и что у вас нет с ошибкой идентификатор (идентификаторы регистр!).

кстати, в большинство современных браузеров, которые реализуют querySelector() и querySelectorAll() методы, CSS-стиль нотация используется для извлечения элемента его id , например: document.querySelector(‘#elementID’) , в отличие от метода, с помощью которого элемент извлекается его id под document.getElementById(‘elementID’) ; в первом # характер необходим, во втором он привел бы к не извлекаемому элементу.

элемент не существует на данный момент вы называете getElementById .

последний случай довольно распространен. Браузеры анализируют и обработайте HTML сверху донизу. Это означает, что любой вызов элемента DOM, который происходит до того, как этот элемент DOM появится в HTML, завершится ошибкой.

рассмотрим следующий пример:

на div появляется после the script . На данный момент скрипт выполнен, элемент не существует пока и getElementById вернутся null .

jQuery

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

добавлен поворот, когда jQuery не найден, потому что вы загрузили скрипт без протокола и работаете из файловой системы:

этот синтаксис используется для загрузки скрипта через HTTPS на страницу с протоколом https: / / и для загрузки версии HTTP на страницу с протокол http://

он имеет неудачный побочный эффект попытки и неспособности загрузить file://somecdn.somewhere.com.

решений

прежде чем позвонить в getElementById (или любой метод DOM), убедитесь, что элементы, к которым вы хотите получить доступ, существуют, т. е. DOM загружен.

это можно обеспечить, просто поставив свой JavaScript после соответствующий элемент DOM

in вы также можете поместить код прямо перед закрывающим тегом body (

Источник

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

каковы возможные причины для document.getElementById , $(«#id») или любой другой метод DOM / селектор jQuery не находит элементы?

пример проблемы включают в себя:

jQuery молча не удается привязать обработчик событий, а стандартный метод DOM возвращает null приведет к ошибке:

Uncaught TypeError: не удается установить свойство ‘. — нуль

6 ответов:

элемент, который вы пытались найти не в DOM когда ваш скрипт побежал.

положение вашего DOM-зависимого скрипта может оказать глубокое влияние на его поведение. Браузеры анализируют HTML-документы сверху вниз. Элементы добавляются в DOM, и скрипты (как правило) выполняются по мере их появления. это означает, что порядок имеет значение. как правило, скрипты не можете найти элементы, которые появляются позже в разметке, потому что эти элементы еще предстоит добавить в DOM.

рассмотрим следующую разметку; скрипт #1 не может найти

Итак, что же делать? У вас есть несколько вариантов:

Вариант 1: переместить скрипт

переместите скрипт дальше вниз по странице, непосредственно перед закрывающим тегом body. Организованный таким образом, остальная часть документа анализируется до вашего сценария исполнено:

_{Примечание: размещение скриптов внизу обычно считается лучшие практики.}

Вариант 2: jQuery ready()

отложите свой скрипт до тех пор, пока DOM не будет полностью проанализирован, используя ready() :

_{Примечание: Вы можете просто привязать к DOMContentLoaded или window.onload но у каждого есть свои предостережения. в jQuery ready() предлагает гибридное решение.}

Вариант 3: Делегирование Событий

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

когда элемент вызывает событие (при условии, что это клокоча событие и ничто не остановит ее распространение), каждый родитель в родословной этого элемента также получает событие. Это позволяет нам присоединить обработчик к существующему элементу и выборке событий, когда они всплывают из его потомков. даже те, которые добавлены после прикрепления обработчика. Все, что нам нужно сделать, это проверить событие, чтобы увидеть, был ли он вызван желаемым элементом и, если да, запустите наш код.

в jQuery!—79—> on() выполняет эту логику для нас. Мы просто предоставляем имя события, селектор для желаемого потомок и обработчик событий:

_{Примечание: как правило, эта модель предназначена для элементов, которые не существовали во время загрузки или чтобы избежать прикрепления большого количества обработчиков. Стоит также отметить, что в то время как я приложил обработчик document (в демонстрационных целях), вы должны выбрать ближайший надежный предок.}

Вариант 4: defer атрибут

для справки, вот код от этого внешний скрипт:

<sub>Примечание: конечно кажется как волшебная пуля но важно быть в курсе предостережений.
1. defer можно использовать только для внешних скриптов, т. е. с .
2. будьте в курсе поддержка браузеров, т. е.: багги реализация в IE</sub>

коротко и просто: потому что элементы, которые вы ищете, не существует в документе (пока).

для остальной части этого ответа я буду использовать getElementById как пример, но то же самое относится к getElementsByTagName , querySelector и любой другой метод DOM, который выбирает элементы.

Возможные Причины

есть две причины, почему элемент не может существуют:

элемент с переданным идентификатором действительно не существует в документе. Вы должны дважды проверить, что идентификатор, который вы передаете getElementById действительно соответствует идентификатору существующего элемента в (сгенерированном) HTML и что у вас нет с ошибкой идентификатор (идентификаторы регистр!).

кстати, в большинство современных браузеров, которые реализуют querySelector() и querySelectorAll() методы, CSS-стиль нотация используется для извлечения элемента по id , например: document.querySelector(‘#elementID’) , в отличие от метода, с помощью которого элемент извлекается его id под document.getElementById(‘elementID’) ; в первом # символ имеет важное значение, во втором случае это приведет к тому, что элемент не будет извлечен.

элемент не существует на данный момент вы называете getElementById .

последний случай довольно распространен. Браузеры разбирают и обработка HTML-кода сверху вниз. Это означает, что любой вызов элемента DOM, который происходит до того, как этот элемент DOM появится в HTML, завершится ошибкой.

рассмотрим следующий пример:

The div появляется после the script . На данный момент скрипт выполнен, элемент не существует и все же и getElementById вернутся null .

jQuery

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

добавленный поворот-это когда jQuery не найден, потому что вы загрузили скрипт без протокола и работаете из файловой системы:

этот синтаксис используется, чтобы позволить скрипту загружаться через HTTPS на странице с протоколом https:// и загружать версию HTTP на странице с протоколом https: / / протокол http://

он имеет неудачный побочный эффект попытки и не удается загрузить file://somecdn.somewhere.com.

решений

прежде чем позвонить в getElementById (или любой метод DOM, если на то пошло), убедитесь, что элементы, к которым вы хотите получить доступ, существуют, т. е. DOM загружен.

это можно обеспечить, просто поставив свой JavaScript после соответствующий элемент DOM

in вы также можете поместить код прямо перед закрывающим тегом body (

Источник

getElementById не работает в javascript [дубликат]

6 ответов

Элемент, который вы пытались найти, не был в DOM , когда ваш скрипт работал.

Позиция вашего DOM-зависимого скрипта может оказать глубокое влияние на его поведение. Браузеры анализируют HTML-документы сверху донизу. Элементы добавляются в DOM, и сценарии выполняются (как правило), когда они встречаются. Это означает, что порядок имеет значение. Как правило, скрипты не могут найти элементы, которые появляются позже в разметке, потому что эти элементы еще не добавлены в DOM.

Рассмотрим следующую разметку; сценарий # 1 не находит

Итак, что вы должны делать? У вас есть несколько вариантов:

Вариант 1: Переместите свой скрипт

Переместите свой скрипт дальше по странице, перед закрывающим тегом тела. Организованный таким образом остальная часть документа анализируется до того, как будет выполнен ваш скрипт:

Примечание: размещение скриптов внизу как правило, считается лучшей практикой .

Вариант 2: jQuery’s ready()

Отмените свой сценарий до тех пор, пока DOM не будет полностью проанализирован, используя ready() :

Примечание. Вы можете просто привязать к DOMContentLoaded или window.onload , но у каждого есть свои оговорки. jQuery ready() предоставляет гибридное решение.

Вариант 3: Делегирование событий

Делегированные события имеют преимущество в том, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже.

Когда элемент вызывает событие (при условии, что это bubbling g6], и ничто не останавливает его распространение), каждый родитель в родословной этого элемента также получает событие. Это позволяет нам привязать обработчик к существующему элементу и примерным событиям, когда они пузырятся от его потомков . даже те, которые добавлены после присоединения обработчика. Все, что нам нужно сделать, это проверить событие, чтобы узнать, был ли он поднят нужным элементом и, если да, запустите наш код.

jQuery on() выполняет эту логику для нас. Мы просто предоставляем имя события, селектор для желаемого потомка и обработчик событий:

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

Вариант 4: Атрибут defer

Используйте атрибут defer в click me

Для справки, вот код из этого внешнего скрипта :

Примечание: атрибут defer , безусловно, кажется , как волшебная пуля , но важно знать об оговорках . 1. defer может использоваться только для внешних скриптов, т. е. для тех, у кого есть атрибут src . 2. знать о поддержке браузера , то есть: ошибка реализации в IE & lt; 10

Короткие и простые: поскольку элементы, которые вы ищете, не существуют в документе (пока).

В оставшуюся часть этого ответа я буду использовать getElementById как пример, но то же самое относится к getElementsByTagName , querySelector и любому другому методу DOM, который выбирает элементы.

Есть две причины, по которым элемент может не существовать:

1. Элемент с переданным идентификатором действительно не существует в документе. Вы должны дважды проверить, что идентификатор, который вы передаете на getElementById , действительно соответствует идентификатору существующего элемента в (сгенерированном) HTML и что у вас не было с ошибкой идентификатор (идентификаторы чувствительный !). Кстати, в большинстве современных браузеров , которые реализуют методы querySelector() и querySelectorAll() , нотация стиля CSS используется для извлечения элемента его id , например: document.querySelector(‘#elementID’) , в отличие от способа, с помощью которого элемент извлекается его id в [[16]; в первом символе # необходимо, во втором это приведет к тому, что элемент не будет извлечен.
2. Элемент не существует в данный момент , который вы вызываете getElementById ].

Последний случай довольно распространен. Браузеры анализируют и обрабатывают HTML сверху вниз. Это означает, что любой вызов элемента DOM, который встречается до появления этого элемента DOM в HTML, не будет выполнен.

Рассмотрим следующий пример:

Появляется div после script . В настоящий момент сценарий выполняется, элемент не существует , но и getElementById вернут null .

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

Добавленный поворот — это когда jQuery не найден потому, что вы загрузили скрипт без протокола и запускаетесь из файловой системы:

этот синтаксис используется, чтобы позволить сценарию загружаться через HTTPS на странице с протоколом https: // и для загрузки HTTP-версии на странице с протоколом http: //

У этого есть неудачный побочный эффект попытки и невозможность загрузить file://somecdn.somewhere.com.

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

Это может быть обеспечено просто добавив ваш JavaScript после к соответствующему элементу DOM

, и в этом случае вы также можете поместить код непосредственно перед тегом закрывающего тела (

Источник