Document getelementbyid javascript не работает

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

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

Источник

Если элемент отсутствует на странице, почему JavaScript выдает ошибку?

Мой сценарий состоит в том, что у меня есть один файл JS, который используется на двух страницах HTML. У одного есть button с id=»a» , а у другого его нет. Я прикрепил событие к id=»a» , выполнив это.

Моя проблема — когда я запускаю второй файл, который не имеет button с id=»a» , и он выдает ошибку

Что вызывает неожиданное поведение! Есть ли способ продолжать использовать только один файл JS, или я должен отделить файл JS для каждой HTML-страницы?

Я прочитал вопрос о StackOverflow здесь, который о том, почему jQuery не выдает ошибку, если селектор недействителен. Мне нужен такой же или похожий функционал с ванильным JavaScript.

3 ответа

Простое решение — добавить проверку:

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

Хитрость, которую использует jQuery, заключается в том, что он всегда что-то возвращает. $(«#id») вернет оболочку jQuery. Эта обертка имеет такие функции, как .on и .load и .html . Селектор может соответствовать одному, нескольким или отсутствующим элементам. Для обертки не имеет значения, сколько элементов соответствует.

Это работает так:

Все вышеперечисленные решения верны. Однако вам определенно следует отказаться от написания whatever.onclick = function , так как это больше не лучший способ написания кода. Используя этот метод, вы получите только одно событие клика. Использование более современного подхода позволяет прикрепить столько событий, сколько вы хотите.

Кроме того, вы упоминаете jQuery, но в поставляемом коде нет jQuery, только ванильный JavaScript. Вам нужно решение jQuery или JavaScript?

Javascript

Jquery

Рассмотрим тестирование существования

Или отступить в случае фальсификации

В этом втором методе функция все еще устанавливается, но будет быстро GC’d, поскольку ссылка на <> умрет в следующей строке.

Источник

GetElementById как работает пример

Что такое GetElementById, как использовать GetElementById , примеры, перевод. Обращение к тегу по его id

Все о методе GetElementById

Что такое GetElementById, как переводится

GetElementById это замечательный метод и из самого названия вы уже сможете понять о чем примерно будет идти речь.

Давайте в самом начале определим, «Что такое GetElementById«.

GetElementById — это метод, с помощью которого можно обратиться к элементу страницы по его идентификатору «id»

Как переводится GetElementById

«By» — из(в контексте), «id» — идентификатор селектора .

Итого получилось перевод – «GetElementById» — получить элемент из идентификатора.

Синтаксис getElementById:

Если мы сможем обратиться к тегу, то далее можем с ним и его внутренностями и внешностями делать все, что нам вздумается!

Пример использования GetElementById

Для того, чтобы показать работу метода GetElementById сделаем див(div) с id example и текстом внутри

Далее нам нужна кнопка при нажатии на которую должно срабатывать событие onclick

Сооружаем такую конструкцию, пишем document.getElementById, во внутрь кавычек помещаем наше название id-> example. И нам например нужно получить все содержание между тегами данного ид добавляем с точкой innerHTML. Полученную конструкцию оборачиваем скобками и выведем на экран результат получения данных с помощью getElementById

Соберем весь код вместе:

Получи данные с помощью GetElementById

Живой пример получения данных с помощью GetElementById:

Получение value с помощью GetElementById

Как отправить данные с помощью GetElementById

Для того, чтобы отправить данные в тег, как мы уже неоднократно говорили нужно обратиться к тегу, мы на данной странице используем для этого GetElementById

Нам в очередной раз понадобится тестовый блок/элемент с id:

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

Источник

document.getElementById()

Возвращает ссылку на элемент по его идентификатору (ID); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.

Синтаксис

Параметры

Возвращаемое значение

ссылка на объект типа Element соответствующий указанному ID или null , если элемент с указанным ID не найден в документе.

Пример

Замечания

Начинающим следует знать, что верхний регистр в части имени метода ‘Id’ должен быть точным для корректного вызова функции; «getElementByID» будет не корректно, как бы естественно это ни казалось.

Если элементы с указанным id отсутствуют , функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так document.getElementById(«Main») вернёт null вместо элемента

Элементы вне документа не ищутся getElementById() . При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью Node.insertBefore() или подобным методом, до того как вы сможете получить к нему доступ при помощи getElementById() :

Не-HTML документы. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем «id» не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут «id» определён в качестве идентификатора в общих случаях XHTML, XUL, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.

Источник

Получение и установка контента элементам в JavaScript

На этом уроке мы рассмотрим свойства, предназначенные для работы с текстовым содержимым элемента ( textContent , innerText , outerText ) и свойства, предназначенные для работы с HTML содержимым элемента ( innerHTML , outerHTML ).

Свойство textContent и как оно работает

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

Примеры с textContent

1. При получении текста элемента, содержащего один текстовый узел, textContent возвратит текст, находящийся внутри этого текстового узла.

2. Для элемента, который содержит множество других узлов, textContent вернёт конкатенацию (сложение) текстов всех его текстовых узлов.

В этом примере текстовые узлы обозначены цифрами. textContent вернёт сложение текстов этих текстовых узлов.

3. При получении textContent у document , оно возвратит null :

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

4. Например, установим элементу #message новое текстовое содержимое:

После установки $elem текстового контента, он будет выглядеть следующим образом:

5. Например, создадим элемент « div.alert », вставим в него некоторый текст и добавим его на страницу перед закрывающим тегом body :

6. Если присвоить textContent строку, содержащую HTML код, то символы и > будут заменены соответственно на и > .

innerText, outerText и их отличие от textContent

innerText также как textContent используется для извлечения текста из элементов.

Но innerText в отличие от textContent как бы копирует текст, отображаемый этим элементом в браузере . Он учитывает стили, применённые к элементу (отображается элемент или нет). Когда элемент скрыт, innerText не включает его текстовый контент в возвращаемые данные.

Кроме этого, innerText не добавляет в возвращаемый результат содержимое style и script .

При установке элементу текстового контента, innerText также как textContent удаляет все имеющиеся в нём узлы и создаёт новый текстовый узел с указанным содержимым.

Синтаксис свойства innerText :

Пример , в котором показана разница между innerText и textContent :

Из примера видно, что innerText не включает в возвращаемые данные контент элемента script .

В этом примере мы ещё дополнительно удалим отображение элемента span из документа, т.е. установим ему « display: none »:

Таким образом innerText учитывает стили элементов, и возвращает только текст отображаемый этим элементом в браузере.

outerText

Ещё в DOM API у элементов имеется свойство outerText . Оно возвращает текстовое содержимое элемента аналогично свойству innerText .

Синтаксис свойства outerText :

Его отличие от innerText только в том, что outerText при установки элементу текстового контента удаляет не только всё его содержимое, но и сам этот элемент и помещает на этом месте новый текстовый узел с заданным текстом.

Например , заменим все элементы img на текст ‘Здесь было изображение’ :

innerHTML и outerHTML

innerHTML предназначен для установки или получения HTML разметки элемента.

Например, установим элементу ul#list новое HTML содержимое:

Пример, в котором получим HTML разметку некоторого элемента:

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

Начинающие веб-разработчики при написании такого кода полагают что он добавит только указанную HTML разметку в конец содержимого $someElem :

Но на самом деле это не так. Этот код выполняет следующее:

получает текущее содержимое $someElem , т.е. HTML-строку, к которой прибавляет ещё одну строку

Эквивалентная запись кода, приведённого выше:

Таким образом, используя такую запись мы не просто добавляем некоторый HTML в конец элемента, а полностью переустанавливаем его. Выполнение такого кода обычно сопровождается «миганием».

Поэтому, в ситуациях, когда вам нужно просто добавить некоторый фрагмент HTML разметки в некоторый элемент лучше воспользоваться, например, методом insertAdjacentHTML .

Пример использования innerHTML для очистки содержимого элемента:

Например, получить и изменить HTML контент элемента р с id=»myP» :

Например, удалить HTML контент элемента p , имеющего id=»demo» :

outerHTML

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

Например, получить и изменить HTML контент списка ul , имеющего id=»myList» :

Источник