пример
Изменить текст первого дочернего элемента с классом = «пример» в <div> элемент:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML
= "Hello World!"; Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
querySelector() метод возвращает первый дочерний элемент, соответствующий заданному CSS selector(s) элемента.
Примечание: querySelector() метод возвращает только первый элемент , который совпадает с указанными селекторами. Для того, чтобы вернуть все матчи, использовать querySelectorAll() метод.
Для получения более подробной информации о CSS селекторов, посетите наш CSS селекторы Учебник и наш CSS селекторы Reference .
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| querySelector() | 4,0 | 8,0 | 3,5 | 3,2 | 10,0 |
Синтаксис
element .querySelector( CSS selectors )Значения параметров
| параметр | Тип | Описание |
|---|---|---|
| CSS selectors | String | Необходимые. Задает один или несколько CSS селекторы, чтобы соответствовать элементу. Они используются для выбора HTML-элементов на основе их идентификаторов, классов, типов, атрибутов, значения атрибутов и т.д. Для нескольких селекторов, каждый селектор отделить запятой. Возвращается элемент зависит от того, какой элемент , который впервые обнаружен в документе (See "More Examples") . Совет: Для получения списка всех CSS селекторов, смотрите на нашем CSS селекторы Reference . |
Технические подробности
| DOM Версия: | Уровень селекторы 1 Элемент объекта |
|---|---|
| Возвращаемое значение: | Первый элемент , который соответствует заданному CSS selector(s) . Если совпадений не найдено, возвращается нуль. Выдает исключение SYNTAX_ERR , если указанный selector(s) недействителен. |
Еще примеры
пример
Изменить текст первого <p> элемент в <div> элемент:
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML
= "Hello World!"; Попробуй сам " пример
Изменить текст первого <p> элемент с классом = «пример» в <div> элемент:
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML
= "Hello World!"; Попробуй сам " пример
Изменение текста элемента с идентификатором = «демо» в <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 Reference: CSS Селекторы Ссылка
JavaScript Учебник: Список JavaScript HTML DOM Node
JavaScript Ссылка: документ. querySelector()
JavaScript Ссылка: элемент. querySelectorAll()
HTML DOM Ссылка: документ. querySelectorAll()