JavaScript querySelectorAll() — усі елементи за CSS-селектором

Метод querySelectorAll() знаходить усі елементи, що відповідають CSS-селектору.

правити

Загальний опис

Повертає NodeList — і тут два нюанси, які варто знати.

Перший: список не живий. Це знімок на мить виклику: додаси новий елемент — у списку його не буде. (На відміну від getElementsByClassName(), який живий і саме тому дає химерні баги в циклах.)

Другий: це не масив. У нього є forEach(), але немає map(), filter(), reduce(). Потрібні вони — розгорни спредом: [...list].

Нічого не знайшов — повертає порожній список, а не null. Тому перевіряти на null не треба, а от length — варто.

правити

Порада

[...document.querySelectorAll('li')] — і далі працюють усі методи масиву. Це найчастіший рядок у щоденному коді.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
querySelectorAll	1+	3.5+	3.1+	10+	12+	8+

Підтримка: мобільні переглядачі

Переглядач
querySelectorAll	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<ul id="list">
    <li class="item">Перший</li>
    <li class="item">Другий</li>
</ul>

const items = document.querySelectorAll('.item');

console.log(items.length); // 2
items.forEach(item => console.log(item.textContent));

// НЕ живий: додали елемент — у списку його немає
list.append(document.createElement('li'));
console.log(items.length); // усе ще 2

// не масив: map() немає
// items.map(...) → TypeError

// розгортаємо — і всі методи масиву на місці
const texts = [...items].map(item => item.textContent);

// не знайшов — порожній список, а не null
console.log(document.querySelectorAll('.missing').length); // 0