HTML DOM querySelector()

❮ Назад ❮ Element Справочник Далее ❯

Метод querySelector()

Пример element.querySelector()

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

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Привет, мир!";

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

Ещё примеры ниже.

Описание querySelector()

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

Примечание: Метод querySelector() возвращает только первый элемент, соответствующий указанным селекторам. Чтобы вернуть все совпадения, используйте вместо этого метод querySelectorAll().

Связные страницы querySelector()

Свойство classList

Свойство className

Метод querySelectorAll()

Метод getElementsByTagName()

Метод getElementsByClassName()

HTML DOM Стиль объекта

Учебники:

CSS Синтаксис

CSS Селектора

CSS Справочник селекторов

Поддержка querySelector()

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает метод.

Метод
querySelector()	4.0	8.0	3.5	3.2	10.0

Синтаксис querySelector()

element.querySelector(CSS селектор)

Значения параметров querySelector()

Параметр	Тип	Описание
CSS селекторы	String	Обязательно. Указывает один или несколько селекторов CSS для соответствия элементу. Они используются для выбора элементов HTML на основе их идентификатора, классов, типов, атрибутов, значений атрибутов и т. д. Для нескольких селекторов разделяйте каждый селектор запятой. Возвращаемый элемент зависит от того, какой элемент был найден в документе первым (см. "Больше примеров"). Совет: Список всех селекторов CSS можно найти в нашем Справочнике селекторов CSS.

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

DOM Версия:	Селекторы уровня 1 Element
Возвращаемое значение:	Первый элемент, соответствующий указанным селекторам CSS. Если совпадений не найдено, возвращается null. Выдает исключение SYNTAX_ERR, если указанные селекторы недействительны.

Ещё примеры querySelector()

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

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Привет, мир!";

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

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

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Привет, мир!";

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

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

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Привет, мир!";

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

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

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

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

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

Предположим, что у вас есть два элемента: элемент <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";

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

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

<div id="myDIV">
<h3>Элемент h3</h3>
<h2>Элемент h2</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

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