Метод HTML DOM querySelector()
❮ Элемент объектаПример
Измените текст первого дочернего элемента с помощью class="example" в элементе <div>:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Метод querySelector() возвращает первый дочерний элемент, который соответствует указанному селектору (селекторам) CSS элемента.
Примечание. Метод querySelector() возвращает только первый элемент, соответствующий указанным селекторам. Чтобы вернуть все совпадения, используйте метод querySelectorAll() .
Для получения дополнительной информации о селекторах CSS посетите наш учебник по селекторам CSS и наш справочник по селекторам CSS .
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Синтаксис
element.querySelector(CSS selectors)
Значения параметров
| Parameter | Type | Description |
|---|---|---|
| CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
Технические детали
| Версия ДОМ: | Селекторы Уровень 1 Элемент Объект |
|---|---|
| Возвращаемое значение: | Первый элемент, соответствующий указанным селекторам CSS. Если совпадений не найдено, возвращается ноль. Выдает исключение SYNTAX_ERR, если указанные селекторы недействительны. |
Дополнительные примеры
Пример
Измените текст первого элемента <p> в элементе <div>:
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
Пример
Измените текст первого элемента <p> с помощью class="example" в элементе <div>:
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
Пример
Измените текст элемента с id="demo" в элементе <div>:
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
Пример
Добавьте красную рамку к первому элементу <a>, у которого есть целевой атрибут внутри элемента <div>:
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
Пример
Этот пример демонстрирует, как работают несколько селекторов.
Предположим, что у вас есть два элемента: элемент <h2> и элемент <h3>.
Следующий код добавит цвет фона к первому элементу <h2> в <div>:
<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
Однако, если элемент <h3> был помещен перед элементом <h2> в <div>. Элемент <h3> — это тот, который получит красный цвет фона.
<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
Связанные страницы
Учебник по CSS: Селекторы CSS
Справочник по CSS : Справочник по селекторам CSS
Учебное пособие по JavaScript: список узлов JavaScript HTML DOM
Справочник по JavaScript: document.querySelector()
Справочник по JavaScript: элемент .querySelectorAll()
Ссылка на HTML DOM: document.querySelectorAll()
❮ Элемент объекта