JavaScript метод document.getElementsByTagName()

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

JavaScript метод document.getElementsByTagName() возвращает коллекцию всех элементов документа с указанным именем тега в виде объекта HTMLCollection. Объект HTMLCollection представляет из себя массивоподобный (итерируемый) объект, который автоматически будет обновляться при изменении документа, элементы внутри объекта располагаются в том же порядке, в каком они присутствуют в документе.

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

Метод getElementsByTagName() также определен в объекте Element, по этой причине он может быть вызван на любом элементе, не только на объекте document. Элемент на котором он вызывается будет использован в качестве корневого элемента для поиска.

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`document.getElementsByTagName()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

document.getElementsByTagName( tagName )

tagName - String

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

Core Level 1 Document Object

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

Параметр	Описание
tagName	Строковое значение, представляющее имя тега элемента, который вы хотите найти в документе. При вызове метод document.getElementsByTagName() перед осуществлением поиска преобразует значение аргумента в нижний регистр. Специальная строка "" представляет все элементы. Обязательный параметр.*

Параметр

Описание

tagName

Строковое значение, представляющее имя тега элемента, который вы хотите найти в документе. При вызове метод document.getElementsByTagName() перед осуществлением поиска преобразует значение аргумента в нижний регистр. Специальная строка "*" представляет все элементы. Обязательный параметр.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода document.getElementsByTagName()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<div>Первый блок</div>
		<div>Второй блок</div>
		<div>Третий блок</div>
		<script>
	function myFunc() {
	  let blocks = document.getElementsByTagName( "div" ); // находим элементы с тегом div
	  for( let i = 0; i < blocks.length; i++){ // проходим циклом по всем элементам массивоподобного объекта
	    blocks[i].style.border = "1px solid green"; // устанавливаем сплошную границу размером 1 пиксель зеленого цвета
	  }		

	  blocks[0].innerHTML += " !";   // добавляем текстовое содержимое первому элементу коллекции
	  blocks[1].innerHTML += " !!";  // добавляем текстовое содержимое второму элементу коллекции
	  blocks[2].innerHTML += " !!!"; // добавляем текстовое содержимое третьему элементу коллекции
	}
		</script>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования JavaScript метода document.getElementsByTagName()

JavaScript Document