Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Element.getElementsByClassName()

JavaScript Element

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

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


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


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

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

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

JavaScript синтаксис:

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

tagName - String

Версия JavaScript

Document Object Model (DOM) Level 1 Core

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

ПараметрОписание
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 метода .getElementByTagName() объекта Element
JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.