querySelector()
Обновлено: 27.03.2023
Визначення та використання
Метод querySelector()повертає перший елемент, який відповідає селектору CSS.
Щоб повернути всі збіги (не лише перші), використовуйте querySelectorAll()замість.
Обидва querySelector()і querySelectorAll()викидають виняток SYNTAX_ERR, якщо селектор(и) недійсний.
Приклади
Отримайте перший елемент <p>:
document.querySelector("p");Різниця між 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.querySelector(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. Якщо збігів не знайдено, null повертається. |