JavaScript метод document.getElementsByName()

  • Михаил
  • 12 мин. на прочтение
  • 119
  • 24 Nov 2022
  • 24 Nov 2022

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

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

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

Обращаю Ваше внимание на то, что объект NodeList представляет коллекцию узлов, которые могут быть доступны по индексным номерам (индекс начинается с 0). Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным именем класса. Если искомые элементы отсутствуют, то значение length будет соответствовать значению 0.

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

МетодChrome
Chrome		Firefox
Firefox		Opera
Opera		Safari
Safari		Internet Explorer
IExplorer		Microsoft Edge
Edge

document.getElementsByName()

ДаДаДаДаДаДа

JavaScript синтаксис:

document.getElementsByName( name ) name - String

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

Core Level 1 Document Object

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

ПараметрОписание

name

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

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

<!DOCTYPE html>
<html>
	<head>
 	<title>Использование JavaScript метода document.getElementsByName()</title>
	</head>
	
	<body>
 	<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
 	<input type = "text"name = "myInput">
 	<input type = "text"name = "myInput">
 	<input type = "text"name = "myInput">
 		<script>
			function myFunc() {
  			let inputs = document.getElementsByName( "myInput" ); // находим элементы с именем myInput
  			for( let i = 0; i < inputs.length; i++){ // проходим циклом по всем элементам массивоподобного объекта
    			inputs[i].style.border = "1px solid red"; // устанавливаем сплошную границу размером 1 пиксель красного цвета
  			}
  			
  			inputs[0].value = "первый"; // устанавливаем первому элементу коллекции новое значение
  			inputs[1].value = "второй"; // устанавливаем второму элементу коллекции новое значение
  			inputs[2].value = "третий"; // устанавливаем третьему элементу коллекции новое значение
  			}
 		</script>
	</body>
</html>

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

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