GetElementsByClassName: примеры (JAVASCRIPT)

Краткие примеры использования

Пример 1: Поиск по одному классу.

<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="other">Элемент 3</div>
<script>
  let elements = document.getElementsByClassName('item');
  console.log(elements.length); // Выведет: 2
  console.log(elements[0].textContent); // Выведет: "Элемент 1"
</script>

Результат в консоли:
2
Элемент 1

Пример 2: Поиск по нескольким классам.

<div class="box red">Красный блок</div>
<div class="box blue">Синий блок</div>
<div class="red">Просто красный</div>
<script>
  // Найдет только элементы, у которых есть ОБА класса одновременно
  let boxes = document.getElementsByClassName('box red');
  console.log(boxes.length); // Выведет: 1
  console.log(boxes[0].textContent); // Выведет: "Красный блок"
</script>

Результат в консоли:
1
Красный блок

Пример 3: Поиск внутри конкретного элемента.

<div id="container">
  <p class="text">Текст внутри контейнера</p>
</div>
<p class="text">Текст снаружи</p>
<script>
  let container = document.getElementById('container');
  let innerText = container.getElementsByClassName('text');
  console.log(innerText.length); // Выведет: 1
</script>

Результат в консоли:
1

Похожие функции в JavaScript

• querySelectorAll – возвращает статическую NodeList элементов, соответствующих CSS-селектору. Предпочтительна для сложных селекторов и когда не требуется "живая" коллекция. Более универсальна, но может быть медленнее для простого поиска по классу.
• getElementById – находит один элемент по уникальному идентификатору. Работает быстрее и возвращает один элемент, а не коллекцию.
• getElementsByTagName – возвращает "живую" HTMLCollection элементов по имени тега. Используется, когда критерием выбора является тип элемента, а не класс.

Выбор функции зависит от задачи. getElementsByClassName оптимальна для быстрого получения "живой" коллекции по имени класса. querySelectorAll лучше подходит для сложных запросов и работы со статическим списком.

Типичные ошибки

Ошибка 1: Попытка использовать методы массива для HTMLCollection.

let items = document.getElementsByClassName('item');
items.forEach(function(el) { // Ошибка: forEach не является функцией items
  console.log(el);
});

Решение: преобразовать коллекцию в массив или использовать цикл for.

// Способ 1
Array.from(items).forEach(el => console.log(el));
// Способ 2
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

Ошибка 2: Непонимание "живой" природы коллекции внутри цикла.

<div class="item">1</div>
<div class="item">2</div>
<script>
  let items = document.getElementsByClassName('item');
  for (let i = 0; i < items.length; i++) {
    document.body.removeChild(items[i]); // После удаления коллекция меняется
    // Это может привести к пропуску элементов
  }
</script>

Решение: кешировать начальную длину или работать с копией.

let items = document.getElementsByClassName('item');
let initialLength = items.length;
for (let i = 0; i < initialLength; i++) {
  items[0].remove(); // Всегда удаляем первый элемент
}

Изменения в последних версиях

Функция getElementsByClassName является устоявшейся частью DOM API и не претерпевала значительных изменений в своей основе. Основные изменения касаются среды исполнения и браузерной поддержки.

В современных браузерах функция доступна не только для document, но и для любого объекта Element, что было стандартизировано. Ранние реализации могли иметь ограничения.

Современные браузеры оптимизируют работу функции, делая её выполнение очень быстрым, сопоставимым с querySelectorAll для простых селекторов классов.

Новых параметров или флагов в спецификацию не добавлялось, так как её функциональность считается завершенной.

Расширенные примеры использования

Пример 1: Динамическое отслеживание добавленных элементов.

<div id="list"></div>
<button onclick="addItem()">Добавить</button>
<script>
  let listDiv = document.getElementById('list');
  let dynamicCollection = listDiv.getElementsByClassName('dynamic');
  // "Живая" коллекция будет обновляться автоматически
  console.log('Начальная длина:', dynamicCollection.length);

  function addItem() {
    let newEl = document.createElement('div');
    newEl.className = 'dynamic';
    newEl.textContent = 'Новый элемент ' + Date.now();
    listDiv.appendChild(newEl);
    // Коллекция dynamicCollection уже содержит новый элемент
    console.log('Текущая длина:', dynamicCollection.length);
    console.log('Последний элемент:', dynamicCollection[dynamicCollection.length-1].textContent);
  }
</script>

Пример 2: Селекция по нескольким классам с исключением.

<div class="post featured">Статья 1</div>
<div class="post">Статья 2</div>
<div class="post archived featured">Статья 3</div>
<script>
  // Получить все посты, которые являются избранными, но не архивными
  let allFeatured = document.getElementsByClassName('post featured');
  let result = [];
  // Фильтрация после получения
  for (let el of allFeatured) {
    if (!el.classList.contains('archived')) {
      result.push(el);
    }
  }
  console.log(result.length); // Выведет: 1 (только "Статья 1")
</script>

Пример 3: Эффективное применение стилей к группе элементов.

<style>
  .highlight { background-color: yellow; }
</style>
<div class="target">Цель 1</div>
<div>Не цель</div>
<div class="target">Цель 2</div>
<script>
  // Быстрое добавление класса сразу многим элементам
  let targets = document.getElementsByClassName('target');
  // Используем классический цикл для максимальной производительности
  for (let i = 0; i < targets.length; i++) {
    targets[i].classList.add('highlight');
  }
</script>

Аналоги в других языках программирования

PHP (с библиотекой DOMDocument):

$html = '<div class="item">Элемент</div>';
$dom = new DOMDocument();
@$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$elements = $xpath->query("//*[contains(concat(' ', normalize-space(@class), ' '), ' item ')]");
echo $elements->item(0)->nodeValue;

Результат:
Элемент

Python (с библиотекой BeautifulSoup):

from bs4 import BeautifulSoup
html = '<div class="item">Элемент</div>'
soup = BeautifulSoup(html, 'html.parser')
elements = soup.find_all(class_="item")
print(elements[0].text)

Результат:
Элемент

jQuery (библиотека для JavaScript):

let elements = $('.item'); // Возвращает jQuery-объект
console.log(elements.length);

Основные отличия: в PHP и Python обычно используются внешние библиотеки для парсинга HTML, а возвращаемые объекты не являются "живыми". jQuery возвращает статическую коллекцию в виде специального объекта с собственным API.