> В чем разница между document.getElementsByClassName и querySelectorAll в JavaScript (JavaScript)

Основное различие между document.getElementsByClassName и querySelectorAll заключается в типе возвращаемой коллекции и динамичности.

getElementsByClassName возвращает живую (live) коллекцию HTMLCollection. Это означает, что если элементы с указанным классом добавляются или удаляются из DOM после вызова метода, коллекция автоматически обновляется. Например, если вы получили коллекцию, а затем добавили новый элемент с этим классом, он сразу появится в коллекции без повторного запроса. Также HTMLCollection не имеет методов forEach, map и т.д. (хотя в современных браузерах итерация через for...of работает).

querySelectorAll возвращает статическую (static) коллекцию NodeList. Она фиксируется в момент вызова и не реагирует на последующие изменения DOM. NodeList поддерживает forEach нативно, а также может быть преобразован в массив через Array.from(). Кроме того, querySelectorAll принимает любой CSS-селектор (классы, ID, атрибуты, псевдоклассы и т.д.), что делает его более гибким, в то время как getElementsByClassName работает только с именами классов.

Пример:

JAVASCRIPT
// Живая коллекция
const liveItems = document.getElementsByClassName('item');
console.log(liveItems.length); // 2, если сейчас два элемента

// Статическая коллекция
const staticItems = document.querySelectorAll('.item');
console.log(staticItems.length); // 2, даже если позже добавить третий