В этом руководстве вы узнаете, как использовать метод getElementsByClassName() в JavaScript для выбора элементов по имени класса.
Метод getElementsByClassName() возвращает массив объектов дочерних элементов с указанным именем класса. Метод getElementsByClassName() доступен для элемента document или любых других элементов.
При вызове метода для элемента document он просматривает весь документ и возвращает дочерние элементы документа:
let elements = document.getElementsByClassName(names);
Однако при вызове метода для определенного элемента он возвращает потомков этого конкретного элемента с заданным именем класса:
let elements = rootElement.getElementsByClassName(names);
Метод возвращает elements, который представляет собой живую HTMLCollection элементов match.
Параметр names — это строка, представляющая одно или несколько имен классов для сопоставления; Чтобы использовать несколько имен классов, вы разделяете их пробелом.
Примеры метода
Давайте рассмотрим несколько примеров использования метода getElementsByClassName().
Предположим, у вас есть следующий HTML-документ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript getElementsByClassName</title>
</head>
<body>
<header>
<nav>
<ul id="menu">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item highlight">JavaScript</li>
<li class="item">TypeScript</li>
</ul>
</nav>
<h1>getElementsByClassName Demo</h1>
</header>
<section>
<article>
<h2 class="secondary">Example 1</h2>
</article>
<article>
<h2 class="secondary">Example 2</h2>
</article>
</section>
</body>
</html>1) Вызов для элемента
В следующем примере показано, как использовать метод getElementsByClassName() для выбора <li>, которые являются потомками элемента <ul> :
let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');
let data = [].map.call(items, item => item.textContent);
console.log(data);Выход:
['HTML', 'CSS', 'JavaScript', 'TypeScript']
Как это работает:
- Сначала выберите элемент <ul> с меню имени класса, используя метод getElementById().
- Затем выберите элементы
<li>, которые являются потомками элемента<ul>, используя методgetElementsByClassName(). - Наконец, создайте массив текстового содержимого элементов
<li>, позаимствовав методmap()Arrayобъекта.
2) Пример вызова в документе
Для поиска элемента с классом heading-secondary используется следующий код:
let elements = document.getElementsByClassName('secondary');
let data = [].map.call(elements, elem => elem.textContent);
console.log(data);Выход:
["Example 1", "Example 2"]
В этом примере вызывается метод getElementsByClassName() для объекта document. Поэтому он ищет элементы с классом secondary во всем документе.