Метод querySelector() объекта Document DOM HTML

Определение и использование

querySelector() метод возвращает элементы, соответствующие CSS-селекторупервыйэлементы.

Если нужно вернутьВсесоответствующие элементы (не только первый соответствующий элемент), пожалуйста, используйте querySelectorAll().

Если селектор недействителен, то querySelector() и querySelectorAll() будут выбрасываться SYNTAX_ERR Исключения.

Пример

Пример 1

Получите первый элемент <p>:

document.querySelector("p");

Попробуйте сами

Пример 2

Получите первый элемент с классом "example":

document.querySelector(".example");

Попробуйте сами

Пример 3

Получите первый элемент <p> с классом "example":

document.querySelector("p.example");

Попробуйте сами

Пример 4

Измените текст элемента с id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Попробуйте сами

Пример 5

Выберите первый элемент <p>, у которого родительский элемент <div>:

document.querySelector("div > p");

Попробуйте сами

Пример 6

Выберите первый элемент <a>, у которого есть атрибут "target":

document.querySelector("a[target]");

Попробуйте сами

Пример 7

Выберите первый <h3> или первый <h4>:

<h3>Элемент h3</h3>
<h4>Элемент h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Попробуйте сами

Пример 8

Выберите первый <h3> или первый <h4>:

<h4>Элемент h4</h4>
<h3>Элемент h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Попробуйте сами

Синтаксис

document.querySelector(cssSelectors)

Параметр

Параметр Описание
cssSelectors

Обязательный. Один или несколько CSS-селекторов.

CSS-селекторы выбирают HTML-элементы по id, классу, типу, атрибутам, значениям атрибутов и т.д.

Для получения полного списка, пожалуйста, посетите наш Референсный справочник по CSS-селекторам.

Для нескольких селекторов, пожалуйста, разделите их запятыми (см. примеры上方 на странице).

Возвратное значение

Тип Описание
Объект

NodeList, содержащий первый элемент, соответствующий CSS-селектору.

Если не найден соответствующий элемент, возвращается null.

Различие между HTMLCollection и NodeList

NodeList и HTMLcollection очень похожи.

Оба представляют собой аналогичные массиву наборы узлов (элементов), извлеченных из документа. Узлы можно получить через индекс (субиндекс). Индекс начинается с 0.

Оба имеют length атрибут, который возвращает количество элементов в списке (сборнике).

HTMLCollection являетсяэлемент документасборник.

NodeList являетсяузел документасборник (узел элемента, узел свойства и узел текста).

Элементы HTMLCollection можно получить через их имя, id или индекс.

Элементы NodeList можно получить только через их индекс.

HTMLCollection всегда являетсяреальныйсборник.

Например: если добавить элемент <li> в список DOM, то список в HTMLCollection также изменится.

NodeList обычно являетсяСтатическийсборник.

Например: если добавить элемент <li> в список DOM, то список в NodeList не изменится.

getElementsByClassName() и getElementsByTagName() Все методы возвращают реальный HTMLCollection.

querySelectorAll() Метод возвращает статический NodeList.

childNodes Свойство возвращает реальный NodeList.

Поддержка браузерами

document.querySelector() Это функция DOM Level 1 (1998).

Поддерживается всеми браузерами:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка

См. также

Учебник:

CSS-селекторы

Референсный справочник по CSS-селекторам

Референсный справочник по NodeList DOM HTML

Метод QuerySelector:

Метод querySelector():

Метод querySelectorAll():

Метод GetElement:

Метод getElementById()

Метод getElementsByTagName()

Метод getElementsByClassName()