JavaScript метод document.getElementsByName()

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

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

Объект 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…	✓58…	✓5	✓4…	✓18	✓58…	✓10.1	✓3.2…	✓1.0	✓4.4	✓3.2…

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

JavaScript синтаксис

const elements = document.getElementsByName(name);

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

HTML Standard.

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

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

Поиск полей по атрибуту name

Нажмите ▶, затем Нажми меня: все три поля с name="myInput" получат красную рамку и значения первый, второй и третий в порядке следования в документе.

index.html

HTML

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

main.js

JavaScript

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) у каждого элемента в зависимости от его индекса в коллекции.