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
getElementsByClassName()ДаДаДаДаДаДа

JavaScript синтаксис:

// поиск элементов с определенным классом
let elements = element.getElementsByClassName( name )

// поиск элементов с определенными классами
let elements = element.getElementsByClassName( name1 name2 nameX )

name (-s) - String

Версия JavaScript

Document Object Model (DOM) Level 1 Core

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

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

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

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

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

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

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

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

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

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

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