JavaScript метод document.getElementsByName()

Определение и применение

JavaScript метод document.getElementsByName() возвращает коллекцию всех элементов документа с указанным именем (значением атрибута name) в виде объекта NodeList. В коллекцию могут попасть даже те элементы, которые не поддерживают атрибут name. Атрибут name может применяться только в (X)HTML документах.

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

Поддержка браузерами

Спецификация: multipage

✓Поддерживается во всех основных браузерах с 2018 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Document.getElementsByName

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
getElementsByName	✓1	✓12… Версия 12 выпущена в 2015 г. Примечание MDN (англ.) Before Edge 79, this method returns an HTMLCollection, not a NodeList.	✓58… Версия 58 выпущена в 2018 г. Версия 1 выпущена в 2004 г. — Удалено в 58; Частичная поддержка Примечание MDN (англ.) Only supported for HTMLDocument, not all Document objects.	✓5	✓4… Версия 4 выпущена в 2009 г. Версия 1 выпущена в 2003 г. — Удалено в 4; Частичная поддержка Примечание MDN (англ.) Only supported for HTMLDocument, not all Document objects.	✓18	✓58… Версия 58 выпущена в 2018 г. Версия 4 выпущена в 2011 г. — Удалено в 58; Частичная поддержка Примечание MDN (англ.) Only supported for HTMLDocument, not all Document objects.	✓10.1	✓3.2… Версия 3.2 выпущена в 2010 г. Версия 1 выпущена в 2007 г. — Удалено в 3.2; Частичная поддержка Примечание MDN (англ.) Only supported for HTMLDocument, not all Document objects.	✓1.0	✓4.4	✓3.2… Версия 3.2 выпущена в 2010 г. Версия 1 выпущена в 2007 г. — Удалено в 3.2; Частичная поддержка Примечание MDN (англ.) Only supported for HTMLDocument, not all Document objects.

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const elements = document.getElementsByName(name);

Спецификация

HTML Standard.

Значения параметров

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

<button data-migration-click-0="">Нажми меня</button>
<input type="text" name="myInput" />
<input type="text" name="myInput" />
<input type="text" name="myInput" />

function myFunc() {
    let inputs = document.getElementsByName('myInput')

    for (let i = 0; i < inputs.length; i++) {
        inputs[i].style.border = '1px solid red'
    }
    inputs[0].value = 'первый'
    inputs[1].value = 'второй'
    inputs[2].value = 'третий'
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода document.getElementsByName() выбирает все элементы с определенным именем (атрибутом name) и инициализируем переменную этим значением (массивоподобный объект). После этого мы проходим циклом по всем элементам этого массивоподобного объекта (объект NodeList) и устанавливаем сплошную границу размером 1 пиксель красного цвета каждому элементу.

Кроме того изменяем значение (атрибут value) у каждого элемента в зависимости от его индекса в коллекции.