В чем разница между querySelector и getElementById, getElementByClassName?

В чем разница между querySelector и getElementById, getElementByClassName?

Это три разных способа поиска элементов в DOM. Каждый имеет свои особенности, преимущества и недостатки.

getElementById

getElementById — поиск по ID, самый старый и самый быстрый способ:

// HTML
<div id="myDiv">Hello</div>

// JavaScript
const elem = document.getElementById('myDiv');
console.log(elem.textContent);  // "Hello"

Характеристики:

• Возвращает один элемент (или null)
• Очень быстро (браузер индексирует IDs)
• ID должен быть уникальным на странице
• Работает только по точному ID

getElementByClassName

getElementByClassName — поиск по классу, возвращает живую коллекцию элементов:

// HTML
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

// JavaScript
const boxes = document.getElementsByClassName('box');
console.log(boxes.length);  // 3
console.log(boxes[0].textContent);  // "Box 1"

// Живая коллекция - меняется автоматически!
const newDiv = document.createElement('div');
newDiv.className = 'box';
document.body.appendChild(newDiv);
console.log(boxes.length);  // Теперь 4! Не пересоздавали

Характеристики:

• Возвращает HTMLCollection (живую коллекцию)
• Коллекция обновляется автоматически при изменении DOM
• Быстрее, чем querySelectorAll (потому что живая)
• Найти может несколько элементов
• Не поддерживает селекторы CSS

querySelector и querySelectorAll

querySelector — универсальный поиск с CSS селекторами:

// HTML
<div id="main">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <p>Text</p>
</div>

// JavaScript
// По ID
const main = document.querySelector('#main');

// По классу
const firstBox = document.querySelector('.box');

// По селектору атрибута
const input = document.querySelector('input[type="text"]');

// По комбинированному селектору
const boxInMain = document.querySelector('#main .box');

// Первый p внутри main
const para = document.querySelector('#main > p');

querySelectorAll — возвращает все совпадения:

const boxes = document.querySelectorAll('.box');
console.log(boxes.length);  // 2

// Это СТАТИЧНАЯ коллекция (NodeList)
const newDiv = document.createElement('div');
newDiv.className = 'box';
document.body.appendChild(newDiv);
console.log(boxes.length);  // Всё ещё 2! (не обновляется)

Таблица сравнения

┌────────────────────┬──────────┬────────────┬──────────────────┐
│ Метод              │ Возвращ. │ Скорость   │ Селекторы CSS    │
├────────────────────┼──────────┼────────────┼──────────────────┤
│ getElementById     │ Element  │ ⚡⚡⚡   │ Только ID (#)    │
│ getElementBy...    │ Live*    │ ⚡⚡      │ Нет              │
│ querySelector      │ Element  │ ⚡        │ Да, все CSS      │
│ querySelectorAll   │ Static** │ ⚡        │ Да, все CSS      │
└────────────────────┴──────────┴────────────┴──────────────────┘

* HTMLCollection — автоматически обновляется
** NodeList — замораживается в момент вызова

Практические примеры

Когда использовать getElementById

// Максимальная производительность для одного поиска
const header = document.getElementById('header');
const footer = document.getElementById('footer');
const modal = document.getElementById('modal');

Когда использовать getElementByClassName

// Когда нужны живые обновления
const activeItems = document.getElementsByClassName('active');

// Добавляем новый элемент
const newItem = document.createElement('li');
newItem.className = 'active';
document.querySelector('ul').appendChild(newItem);

// activeItems.length автоматически увеличится!
console.log(activeItems.length);  // Живая коллекция

Когда использовать querySelector

// Сложные селекторы
const firstInput = document.querySelector('form input[type="text"]');

// Псевдоклассы
const lastItem = document.querySelector('li:last-child');

// Комбинированные селекторы
const activeInMenu = document.querySelector('nav.menu > a.active');

// Селекторы атрибутов
const dataButton = document.querySelector('[data-action="save"]');

Когда использовать querySelectorAll

// Нужны все элементы
const paragraphs = document.querySelectorAll('p');
for (let p of paragraphs) {
  p.style.color = 'blue';
}

// Комбинированный селектор
const allButtons = document.querySelectorAll('.form button[type="submit"]');
allButtons.forEach(btn => {
  btn.addEventListener('click', handleSubmit);
});

Живая vs Статичная коллекция

Живая (HTMLCollection):

const live = document.getElementsByClassName('item');
console.log(live.length);  // 3

// Добавляем элемент
const newElem = document.createElement('div');
newElem.className = 'item';
document.body.appendChild(newElem);

console.log(live.length);  // 4! Обновилась автоматически

Статичная (NodeList):

const static = document.querySelectorAll('.item');
console.log(static.length);  // 3

// Добавляем элемент
const newElem = document.createElement('div');
newElem.className = 'item';
document.body.appendChild(newElem);

console.log(static.length);  // Всё ещё 3! Не обновилась

Производительность

// Тест производительности
const iterations = 100000;

console.time('getElementById');
for (let i = 0; i < iterations; i++) {
  document.getElementById('myDiv');
}
console.timeEnd('getElementById');  // ~50ms

console.time('querySelector');
for (let i = 0; i < iterations; i++) {
  document.querySelector('#myDiv');
}
console.timeEnd('querySelector');  // ~100ms (медленнее)

console.time('getElementsByClassName');
for (let i = 0; i < iterations; i++) {
  document.getElementsByClassName('box');
}
console.timeEnd('getElementsByClassName');  // ~80ms

Резюме

getElementById:

• Самый быстрый способ
• Для поиска по уникальному ID
• Возвращает один Element или null

getElementsByClassName:

• Возвращает живую коллекцию
• Автоматически обновляется при изменении DOM
• Быстрее querySelectorAll
• Ограничена поиском только по классу

querySelector/querySelectorAll:

• Универсальный, поддерживает все CSS селекторы
• querySelectorAll возвращает статичную коллекцию
• Немного медленнее, но удобнее
• Современный стандартный подход

Рекомендация: В современном коде обычно используют querySelector/querySelectorAll за их универсальность. getElementById остаётся для максимальной производительности в критичных местах.