Метод querySelector()
Пример
Получить первый элемент в документе с помощью class="example":
document.querySelector(".example");
Попробуйте сами »
Ещё примеры "Попробуйте сами" ниже.
Определение и использование
Метод querySelector() возвращает первый элемент, соответствующий указанному CSS Селектор(ы) в документе.
Примечание: Метод querySelector() возвращает только первый элемент, который соответствует указанным селекторам. Чтобы вернуть все совпадения, используйте вместо этого , используйте метод querySelectorAll().
Если селектор соответствует идентификатору в документе, который используется несколько раз (обратите внимание, что "id" должен быть уникальным на странице и не должен использоваться более одного раза), он возвращает первый соответствующий элемент.
Для получения дополнительной информации о селекторах CSS посетите Учебник CSS Селекторы и Справочник CSS Селекторы.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
| Метод | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Синтаксис
document.querySelector(CSS Селекторы)
Значения параметров
| Параметр | Тип | Описание |
|---|---|---|
| CSS Селекторы | String | Требуется. Указывает один или несколько селекторов CSS для соответствия элементу. Они используются для выбора HTML элементы на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и т.д. Для нескольких селекторов разделяйте каждый селектор запятой. Возвращаемый элемент зависит от того, какой элемент был найден в документе первым (Смотрите "Дополнительные примеры"). <сильный>Совет: Список всех селекторов CSS смотрите в нашем Справочник CSS Селекторы. |
Технические детали
| DOM Версия | Базовый уровень 1 Объект документа |
|---|---|
| Возвращаемое значение: | Объект NodeList, представляющий первый элемент, соответствующий указанным CSS-селекторам. Если совпадений не найдено, возвращается значение null. Выдает исключение SYNTAX_ERROR, если указанный селектор(ы) недействителен. |
Ещё примеры
Пример
Получить первый элемент <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]");
Попробуйте сами »
Пример
Этот пример демонстрирует, как работают несколько селекторов.
Предположим, что у вас есть два элемента: элемент <h2> и элемент <h3>.
Следующий код добавит цвет фона к первому элементу <h2> в документе:
<h2>Элемент h2</h2>
<h3>Элемент h3</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
Попробуйте сами »
Однако, если элемент <h3> был помещен перед элементом <h2> в документе. Элемент <h3> - это тот, который получит красный цвет фона.
<h3>Элемент h3</h3>
<h2>Элемент h2</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Селекторы
CSS Справочник: Справочник CSS Селекторы
JavaScript Tutorial: JavaScript HTML DOM Список узлов
JavaScript Справочник: element.querySelector()
HTML DOM Справочник: document.querySelectorAll()
JavaScript Справочник: element.querySelectorAll()
