getElementsByClassName

Урок 5 из 13 курса Методы JavaScript DOM на Coddy.

Функция getElementsByClassName() возвращает массив всех элементов с соответствующим атрибутом класса, что полезно для выбора нескольких элементов, имеющих одинаковый стиль или поведение. Например:

const elements = document.getElementsByClassName("className");

Приведенный выше код извлекает элементы с классом className и сохраняет их в переменную с именем elements.

Нам нужно перебрать эту переменную, чтобы изменить свойства всех подобных элементов, например:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

Задание

Легко

Вам дан HTML-код, который содержит абзацы с именем класса highlight.

Используя только JavaScript, измените цвет и насыщенность шрифта текста:

Получите элементы с помощью функции getElementsByClassName().
Переберите полученную переменную с элементами, используя цикл for.
Измените color на “orange” и fontWeight на “bold”, используя свойство style, для каждого элемента в массиве.

Вам нужно будет обновить веб-страницу, чтобы увидеть изменения:

Попробуйте сами

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

Все уроки раздела Методы JavaScript DOM

1Введение

Введение Document Object Model

2Методы DOM I

getElementById Изменение стиля элементаgetElementsByClassNameПеребор и манипуляция элементами getElementsByTagName querySelector

3Методы DOM II

querySelectorAll addEventListener innerHTML createElement и appendChild classList toggle