JavaScript метод Element.getElementsByClassName()

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

JavaScript метод getElementsByClassName() объекта Element возвращает живую коллекцию HTMLCollection элементов с заданным именем тега, поиск элементов при этом ведется внутри указанного элемента.

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

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

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

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

JavaScript синтаксис:

// поиск элементов с определенным тегом
let elements = element.getElementsByTagName( tagName )

tagName - String

Версия JavaScript

Document Object Model (DOM) Level 1 Core

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

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

Параметр

Описание

tagName

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

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

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

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

Кроме того, с использованием метода .getElementsByTagName() мы выбираем все элементы <div> и инициализируем переменную этими элементами, поиск при этом мы ведем непосредственно внутри элемента <section> html5 . После этого мы проходим циклом по всем элементам этого массивоподобного объекта (объект NodeList) и устанавливаем определенный цвет текста каждому элементу.

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

Пример использования JavaScript метода .getElementByTagName() объекта Element

JavaScript Element