Метод querySelector()
Пример
Изменить текст элемента Первого ребенка на class="example" в элементе <div>:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Привет мир!";
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Метод querySelector() возвращает элемент Первого ребенка, который соответствует указанному CSS-селектору(ам) элемента.
Примечание: Метод querySelector() возвращает только первый элемент, который соответствует указанным селекторам. Чтобы вернуть все совпадения, используйте вместо метода querySelectorAll().
Для получения дополнительной информации о селекторах CSS посетите Учебник CSS селекторы и Справочник CSS селекторы.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
Метод | |||||
---|---|---|---|---|---|
querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Синтаксис
element.querySelector(CSS Селекторы)
Параметр значений
Параметр | Тип | Описание |
---|---|---|
CSS Селекторы | String | Требуется. Указывает один или несколько селекторов CSS для соответствия элементу. Они используются для выбора HTML элементы на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и т.д. Для множества селекторов разделяйте каждый селектор запятой. Возвращаемый элемент зависит от того, какой элемент был найден в документе первым (См. "Ещё примеры"). Совет: Список всех селекторов CSS смотрите Справочник CSS Селекторы. |
Технические детали
DOM Версия: | Уровень селекторов 1 Объект элемента |
---|---|
Вернёт значение | Первый элемент, соответствующий указанным CSS-селекторам. Если совпадений не найдено, возвращается значение null. Выдает исключение SYNTAX_ERR, если указанный селектор(ы) недействителен. |
Ещё примеры
Пример
Изменить текст первого элемента <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>, который имеет целевой атрибут внутри элемента <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";
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Селекторы
CSS Справочник: CSS Селекторы Справочник
JavaScript Учебник: JavaScript HTML DOM Список Узла
JavaScript Справочник: document.querySelector()
JavaScript Справочник: element.querySelectorAll()
HTML DOM Справочник: document.querySelectorAll()