getElementById, getElementsByClassName

Методы getElementById и getElementsByClassName — классические способы поиска DOM-элементов по идентификатору или CSS-классу, возвращающие соответственно один элемент или живую HTMLCollection.

Зачем нужно

Поиск элементов — базовая операция для любой DOM-манипуляции. getElementById — самый быстрый метод поиска, так как браузер ведёт внутренний индекс по id. getElementsByClassName возвращает «живую» коллекцию, которая автоматически обновляется при изменении DOM, что важно понимать во избежание багов.

Где используется

  • Получение конкретного элемента формы, кнопки, контейнера по id
  • Работа с группами элементов одного класса (табы, карточки, пункты меню)
  • Устаревший код и легаси-проекты, где не используется querySelector
  • Ситуации, где нужна живая коллекция, обновляемая автоматически

Основной контент

getElementById

// Возвращает элемент или null
const btn = document.getElementById('submit-btn');

if (btn) {
  btn.addEventListener('click', () => console.log('Нажато'));
}

// id уникален — метод возвращает только один элемент
const header = document.getElementById('main-header');
console.log(header.tagName); // 'H1' (например)

getElementsByClassName

// Возвращает HTMLCollection (живая коллекция!)
const cards = document.getElementsByClassName('card');
console.log(cards.length); // текущее количество .card

// Добавляем новый элемент с классом card
const newCard = document.createElement('div');
newCard.className = 'card';
document.body.appendChild(newCard);

console.log(cards.length); // автоматически увеличилось!

// Перебор — нужно преобразование, т.к. не массив
Array.from(cards).forEach(card => {
  card.style.border = '1px solid red';
});

// Или через spread
[...cards].forEach(card => card.classList.add('active'));

getElementsByTagName

// Аналогично — живая коллекция по тегу
const inputs = document.getElementsByTagName('input');
console.log(inputs[0].value);

// Можно искать внутри элемента
const form = document.getElementById('login-form');
const formInputs = form.getElementsByTagName('input');

Сравнение методов

// getElementById — самый быстрый, возвращает Element или null
document.getElementById('id');

// getElementsByClassName — живая HTMLCollection
document.getElementsByClassName('class');

// querySelector — мощнее, но медленнее, возвращает первый
document.querySelector('#id');
document.querySelector('.class');

// querySelectorAll — статичная NodeList
document.querySelectorAll('.class');

Частые ошибки

  • Итерация HTMLCollection как массива — forEach, map не работают напрямую на HTMLCollection. Нужно Array.from или spread [...].
  • Мутация коллекции в цикле — при добавлении/удалении элементов внутри цикла по живой HTMLCollection индексы смещаются. Преобразуйте в массив перед итерацией.
  • Поиск по несуществующему id — getElementById возвращает null, обращение к свойствам без проверки выбрасывает TypeError.

Связанные темы

Ресурсы