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