Метод querySelector() DOM Element HTML

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

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

Обратите внимание:

querySelector() Метод возвращает только первый элемент, соответствующий указанному селектору. Для возвращает всех соответствующих элементов, пожалуйста, используйте Метод querySelectorAll().

См. также:

Руководство пользователя:

Свойство classList

Свойство className

Метод querySelectorAll()

Метод getElementsByTagName()

Метод getElementsByClassName()

Объект Style HTML DOM

Урок:

Грамматика CSS

Выборщики CSS

Референсный справочник выборщиков CSS

Пример

Пример 1

Изменить текст первого подэлемента с классом="example" в элементе <div>:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

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

Более сложные примеры предоставлены в нижней части страницы.

Синтаксис

element.querySelector(CSSselectors)

Параметры

Параметры Описание
CSSselectors

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

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

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

Возвратный элемент зависит от первого найденного элемента в документе (смотрите также "Более сложные примеры").

Совет:Для полного списка CSS-селекторов обратитесь к нашему Референсный справочник выборщиков CSS.

Технические детали

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

Соответствует первому элементу, соответствующему указанному CSS-селектору.

Если не найдено соответствие, возвращает null.

Если указанный селектор недействителен, будет выведена ошибка SYNTAX_ERR.
Версия DOM: Выборщики уровня 1 Объект элемента

Более сложные примеры

Пример 2

Изменить текст первого <p> элемента в элементе <div>:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

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

Пример 3

Изменить текст первого <p> элемента с классом="example" в элементе <div>:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

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

Пример 4

Изменить текст элемента с id="demo" в элементе <div>:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

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

Пример 5

Добавить красную рамку к первому элементу <a> с атрибутом target в <div>:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

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

Пример 6

Этот пример демонстрирует, как работают múltiples селекторы.

Предположим, что у вас есть два элемента: элементы <h2> и <h3>.

Следующий код добавит фоновый цвет к первому элементу <h2> в <div>:

<div id="myDIV">
  <h2>Элемент h2</h2>
  <h3>Элемент h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

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

Пример 7

Но, если элемент <h3> в <div> помещен перед элементом <h2>, элемент <h3> получит красный цвет фона.

<div id="myDIV">
  <h3>Элемент h3</h3>
  <h2>Элемент h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

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

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот метод.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Соответствующие страницы

Уроки CSS:Выборщики CSS

Руководство по CSS:Референсный справочник выборщиков CSS

Уроки JavaScript:Node List HTML DOM JavaScript

Руководство по JavaScript:document.querySelector()

Руководство по JavaScript:element.querySelectorAll()

Руководство по HTML DOM:document.querySelectorAll()