Метод querySelector()
Примеры document.querySelector()
Получить первый элемент <p>:
document.querySelector("p");
Попробуйте сами »
Получите первый элемент с помощью class="example":
document.querySelector(".example");
Попробуйте сами »
Ещё примеры ниже.
Описание querySelector()
Метод querySelector() возвращает первый элемент, соответствующий селектору CSS.
Чтобы вернуть все совпадения (а не только первое), используйте вместо этого querySelectorAll().
Оба метода querySelector() и querySelectorAll() выдают исключение SYNTAX_ERR, если селектор(ы) недействительны.
Разница между HTMLCollection и NodeList
NodeList и HTMLcollection — это практически одно и то же.
Оба — это массивоподобные коллекции (списки) узлов (элементов), извлеченных из документа. Доступ к узлам можно получить по индексным номерам. Индекс начинается с 0.
Оба имеют свойство length, которое возвращает количество элементов в списке (коллекции).
HTMLCollection — это коллекция элементов документа.
NodeList — это коллекция узлов документа (узлов элементов, узлов атрибутов и текстовых узлов).
Элементы HTMLCollection можно получить по имени, идентификатору или номеру индекса.
Элементы NodeList можно получить только по номеру индекса.
HTMLCollection всегда является живой коллекцией. Пример: если вы добавите элемент <li> в список в DOM, список в HTMLCollection также изменится.
NodeList чаще всего является статической коллекцией. Пример: если вы добавляете элемент <li> в список в DOM, список в NodeList не изменится.
Методы getElementsByClassName() и getElementsByTagName() возвращают активную HTMLCollection.
Метод querySelectorAll() возвращает статический NodeList.
Свойство childNodes возвращает активную NodeList.
Синтаксис querySelector()
document.querySelector(CSS selectors)
Параметры querySelector()
| Параметр | Описание |
|---|---|
| CSS selectors |
Обязательно. Один или несколько селекторов CSS. Селекторы CSS выбирают элементы HTML на основе идентификатора, классов, типов, атрибутов, значений атрибутов и т.д. Полный список см. в нашем Справочнике селекторов CSS. Для нескольких селекторов разделяйте каждый селектор запятой (см. "Дополнительные примеры"). |
Возвращаемое значение querySelector()
| Тип | Описание |
|---|---|
| Object | NodeList с первым элементом, соответствующим селектору(ам) CSS. Если совпадений не найдено, возвращается null. |
Ещё примеры querySelector()
Получите первый элемент <p> с помощью class="example":
document.querySelector("p.example");
Попробуйте сами »
Измените текст элемента с помощью id="demo":
document.querySelector("#demo").innerHTML = "Привет, мир!";
Попробуйте сами »
Выберите первый элемент <p>, родительским элементом которого является элемент <div>.
document.querySelector("div > p");
Попробуйте сами »
Выберите первый элемент <a>, имеющий атрибут "target":
document.querySelector("a[target]");
Попробуйте сами »
Выберите первый <h3> или первый <h4>:
<h3>Элемент h3</h3>
<h4>Элемент h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Попробуйте сами »
Выберите первый <h3> или первый <h4>:
<h4>Элемент h4</h4>
<h3>Элемент h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Попробуйте сами »
Поддержка браузера querySelector()
document.querySelector() является функцией DOM уровня 1 (1998).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |