Javascript getelementsbyname не работает

getElementsByName не работает

Посмотрел несколько «Ответов» на эту проблему, но в основном это были просто люди, которые не рассматривали результат, возвращенный getElementsByName (), как NodeList!

Редактировать: я пытаюсь скрыть / показать элементы, основанные на элементе, по которому щелкают. Я мог жестко закодировать это, используя document.getElementById, и просто добавлять его каждый раз, когда у меня есть элемент, который я хочу скрыть / отобразить. Но было бы идеально, если бы я мог получить все элементы с именем что-то и просто запустить цикл для их скрытия / показа. Тогда я мог бы просто пометить элемент именем при записи, и этот цикл работал бы без изменений. Ниже мой код просто пытается вывести предупреждение со значением для целей тестирования. На данный момент, он постоянно разрывается с нулевой ошибкой. Я использую и проектирую для Internet Explorer 9, так как это то, что компания использует.

Вышеприведенный код говорит о том, что объект в getElementsByName (‘EngineeringAreas’) [0] является нулевым. Понятно, прямо под ним, это не нуль . Я путаю getElementsByName (‘string’) [0] .value со значением элемента? Или это получение какого-то другого значения?

В идеале, я бы добавил другие элементы позже, пометил бы их «EngineeringAreas» и никогда не связывался с функцией скрытия / показа.

Редактировать: вот сообщение об ошибке:

2 ответа

Вот, пожалуйста . кажется:

1. onclick=»javascript: ShowContentEngineering должен быть установлен в контексте окна
2. Вы ссылаетесь на атрибут «значение» элемента, который не допускает атрибуты значения (h5)

Я заставил это работать вместо того, чтобы захватить innerHTML кода h5

Вставьте .attributes[1] между .getElementsByName(‘EngineeringAreas’) и .value . 1 указывает на второй атрибут в элементе

Источник

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

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

Источник

Почему getElementsByTagName не работает?

Что именно не так с этим кодом?

Цвет фона не изменяется на желтый.

getElementsByTagName() возвращает массив объектов. Чтобы применить свойство style, вам нужно указать индекс inorder.

Вы можете использовать консоль браузера для диагностики этих проблем. Ваш код запускает:

ТипError: document.getElementsByTagName(…). Style undefined

Это означает, что все, что приходит прямо перед style , либо не является объектом, либо объектом, но не имеет свойства style . Чтобы узнать, что это такое:

Вы увидите, что это HTMLCollection, какая документация для getElementsByTagName говорит, что это должно быть.

Короче говоря, вам нужно выбрать элемент, например первый:

Или, чтобы сделать ваш код более надежным:

getElementsByTagName возвращает объект, который является итерируемым как массив, на вашей странице может быть больше одного абзаца, поэтому в первой позиции будет первый

который соответствует Javascript.

Кроме того, используйте document.getElementById(‘demo’) если у вас есть только один элемент для управления. Он не будет возвращать массив, поскольку идентификаторы являются исключительными для одного элемента.

document.getElementsByTagName возвращает массив элементов. Не только один элемент. Поскольку массив имеет свойство length, вы можете выбрать конкретный элемент, подобный этому,

для выбора всех элементов, которые вы циклы

Источник

Поиск: getElement*, querySelector*

Свойства навигации по DOM хороши, когда элементы расположены рядом. А что, если нет? Как получить произвольный элемент страницы?

Для этого в DOM есть дополнительные методы поиска.

document.getElementById или просто id

Если у элемента есть атрибут id , то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.

Также есть глобальная переменная с именем, указанным в id :

…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

Это поведение соответствует стандарту, но поддерживается в основном для совместимости, как осколок далёкого прошлого.

Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

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

В реальной жизни лучше использовать document.getElementById .

Значение id должно быть уникальным. В документе может быть только один элемент с данным id .

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

Метод getElementById можно вызвать только для объекта document . Он осуществляет поиск по id по всему документу.

querySelectorAll

Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem , удовлетворяющие данному CSS-селектору.

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

:

Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.

Псевдоклассы в CSS-селекторе, в частности :hover и :active , также поддерживаются. Например, document.querySelectorAll(‘:hover’) вернёт коллекцию (в порядке вложенности: от внешнего к внутреннему) из текущих элементов под курсором мыши.

querySelector

Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.

Иначе говоря, результат такой же, как при вызове elem.querySelectorAll(css)[0] , но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.

matches

Предыдущие методы искали по DOM.

Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false .

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

closest

Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.

Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.

Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null , если такой элемент не найден.

getElementsBy*

Существуют также другие методы поиска элементов по тегу, классу и так далее.

На данный момент, они скорее исторические, так как querySelector более чем эффективен.

Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.

• elem.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав «*» вместо тега, можно получить всех потомков.
• elem.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
• document.getElementsByName(name) возвращает элементы с заданным атрибутом name . Очень редко используется.

Давайте найдём все input в таблице:

Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву «s» . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .

Буква «s» отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому «s» обязательна.

Другая распространённая ошибка – написать:

Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

Ищем элементы с классом .article :

Живые коллекции

Все методы «getElementsBy*» возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

В приведённом ниже примере есть два скрипта.

Первый создаёт ссылку на коллекцию

Напротив, querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.

Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную 1 :

Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе.

Итого

Есть 6 основных методов поиска элементов в DOM:

Метод	Ищет по.	Ищет внутри элемента?	Возвращает живую коллекцию?
querySelector	CSS-selector	✔	—
querySelectorAll	CSS-selector	✔	—
getElementById	id	—	—
getElementsByName	name	—	✔
getElementsByTagName	tag or ‘*’	✔	✔
getElementsByClassName	class	✔	✔

Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll , но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.

• Есть метод elem.matches(css) , который проверяет, удовлетворяет ли элемент CSS-селектору.
• Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.

И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:

• elemA.contains(elemB) вернёт true , если elemB находится внутри elemA ( elemB потомок elemA ) или когда elemA==elemB .

Задачи

Поиск элементов

Вот документ с таблицей и формой.

1. Таблицу с id=»age-table» .
2. Все элементы label внутри этой таблицы (их три).
3. Первый td в этой таблице (со словом «Age»).
4. Форму form с именем name=»search» .
5. Первый input в этой форме.
6. Последний input в этой форме.

Источник