В различных ситуациях программистам необходимо получить элемент HTML по атрибуту имени. Предположим, разработчик хочет получить доступ к элементу управления формы, например переключателю или флажку, чтобы прочитать или изменить его значение. Более конкретно, « имя ” используется для группировки связанных элементов управления формы, и одно и то же имя может быть предоставлено многим элементам управления, что позволяет получить к ним доступ как к одной группе.
В этом посте будут показаны методы извлечения элемента HTML по имени в JavaScript.
Как получить элементы по имени в JavaScript?
В JavaScript вы можете получить доступ к элементу HTML, используя его атрибут name с помощью следующих предопределенных методов JavaScript:
-
- Метод getElementsByName()
- Метод querySelectorAll()
Способ 1: получить элемент по имени с помощью метода «getElementsByName()»
Чтобы получить элемент HTML по имени, используйте « получитьэлементы по имени() метод. Этот метод предоставляет коллекцию элементов с указанным атрибутом имени.
Синтаксис
Для метода getElementsByName() используется следующий синтаксис:
document.getElementsByName ( 'имя' )
Пример
Во-первых, создайте шесть кнопок. Пятеро из них имеют « имя ', который используется для получения HTML-элемента ' кнопка ». Прикрепите событие onclick к шестой кнопке, которая будет вызывать « применить стиль () ” для стилизации пяти кнопок:
< кнопка имя '=' 'кнопка' > Кнопка кнопка >< кнопка имя '=' 'кнопка' > Кнопка кнопка >
< кнопка имя '=' 'кнопка' > Кнопка кнопка >
< кнопка имя '=' 'кнопка' > Кнопка кнопка >
< кнопка имя '=' 'кнопка' > Кнопка кнопка > < бр >< бр >
< кнопка при клике = 'применить стиль()' > Кликните сюда кнопка >
Определить функцию применить стиль () », который сработает при нажатии кнопки и изменит цвет фона всех кнопок. Для этого сначала получите все « кнопка » элементы как группу, вызвав « получитьэлементы по имени() метод:
const btns = document.getElementsByName ( 'кнопка' ) ;
btns.forEach ( кнопка = > {
btn.style.background = 'кадетский синий' ;
} ) ;
}
Как вы можете видеть в выводе, при нажатии на кнопку цвет фона пяти кнопок будет изменен:
Способ 2: получить элемент по имени с помощью метода «querySelectorAll()»
Вы также можете использовать функцию « ЗапросСелекторВсе() ” для получения элементов с помощью “ имя ” в JavaScript. Этот метод используется для извлечения всех элементов в документе, которые соответствуют указанному селектору/атрибуту, такому как класс CSS, идентификатор или имя.
Синтаксис
Данный синтаксис используется для получения элемента по имени с помощью « запросСелекторВсе()” метод:
документ.querySelectorAll ( '[имя='n1']' ) ;
Пример
В следующем примере мы изменим цвет только тех кнопок, имя которых « бтн1 ”:
< див >< название кнопки = 'кнопка' > Кнопка кнопка >
< название кнопки = 'бтн1' > Кнопка кнопка >
< название кнопки = 'кнопка' > Кнопка кнопка >
< название кнопки = 'бтн1' > Кнопка кнопка >
< название кнопки = 'кнопка' > Кнопка кнопка > < бр >< бр >
< кнопка при клике = 'применить стиль()' > Кликните сюда кнопка >
див >
В определенной функции мы сначала вызовем доступ ко всем элементам кнопки, имя которых « бтн1 », а затем примените к нему стиль:
const btns = document.querySelectorAll ( '[имя='btn1']' ) ;
btns.forEach ( кнопка = > {
btn.style.background = 'кадетский синий' ;
} ) ;
}
Данный вывод означает, что только две кнопки изменили свой цвет фона с именем «btn1»:
Примечание: Если вы хотите получить один элемент, рекомендуется использовать document.querySelector вместо document.querySelectorAll.
Заключение
Для получения или извлечения элемента по имени используйте « получитьэлементы по имени() ' или ' ЗапросСелекторВсе() методы. Наиболее часто и эффективно используемый метод получения элемента по имени — это метод «getElementsByName()». В этом посте показаны методы извлечения элемента HTML по имени в JavaScript.