HTML DOM querySelector()Метод

HTML 元素对象参考手册Объект Element

Примеры

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

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

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

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

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

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

Чтобы узнать больше о CSS-селекторах, посетите нашУчебник по CSS-селекторами нашСправочник по CSS-селекторам。

Поддержка браузеров

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

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

Синтаксис

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

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

Параметр Type Описание
CSS-селектор String Обязательный. Задает один или несколько CSS-селекторов для сопоставления с элементом. Вы можете выбирать элементы по их id, class, type, атрибуту, значению атрибута и т. д.

При использовании нескольких селекторов разделяйте их запятыми; возвращается подходящий элемент.

Совет:Чтобы узнать больше о CSS-селекторах, обратитесь к нашемуСправочнику по CSS-селекторам。

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

Версия DOM: Объект элемента Selectors Level 1
Возвращаемое значение: Первый элемент, соответствующий указанному CSS-селектору. Если совпадений не найдено, возвращается null. Если указан недопустимый селектор, выбрасывается исключение SYNTAX_ERR.

Другие примеры

Примеры

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

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

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

Примеры

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

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

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

Примеры

Измените первый элемент <p> с class="example" внутри элемента <div>:

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

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

Примеры

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

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";

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

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

Справочник JavaScript:document.querySelector()

HTML 元素对象参考手册Объект Element

Другие расширения