Метод getElementsByClassName() в JavaScript

В этом руководстве вы узнаете, как использовать метод 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 во всем документе.

Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript