querySelectorAll()
Обновлено: 27.03.2023
Визначення та використання
Метод querySelectorAll()повертає всі елементи, які відповідають селекторам CSS.
Метод querySelectorAll()повертає NodeList .
Метод querySelectorAll()створює виняток SYNTAX_ERR, якщо селектор(и) недійсний
приклад
Виберіть усі елементи з class="example":
document.querySelectorAll(".example");Різниця між HTMLCollection і NodeList
NodeList і HTMLcollection – це майже те саме.
Обидва є масивоподібними колекціями (списками) вузлів (елементів), витягнутих із документа. До вузлів можна отримати доступ за номерами індексів. Індекс починається з 0.
Обидва мають властивість length , яка повертає кількість елементів у списку (колекції).
HTMLCollection — це набір елементів документа .
NodeList — це набір вузлів документа (вузли елементів, вузли атрибутів і текстові вузли).
Доступ до елементів HTMLCollection можна отримати за їх назвою, ідентифікатором або номером індексу.
До елементів NodeList можна отримати доступ лише за їх індексним номером.
HTMLCollection завжди є живою колекцією. Приклад: якщо ви додасте елемент <li> до списку в DOM, список у HTMLCollection також зміниться.
NodeList найчастіше є статичною колекцією. Приклад: якщо ви додасте елемент <li> до списку в DOM, список у NodeList не зміниться.
Методи getElementsByClassName()and getElementsByTagName() повертають живу HTMLCollection.
Метод querySelectorAll()повертає статичний NodeList.
Властивість childNodesповертає живий NodeList.
Синтаксис
document.querySelectorAll(CSS selectors)
Параметри
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Повернене значення
| Тип | опис |
| Об'єкт | Об’єкт NodeList з елементами, які відповідають селектору(ам) CSS. Якщо збігів не знайдено, повертається порожній об’єкт NodeList. |