Метод HTML DOM querySelector ()
примеров
Первый дочерний элемент модификации содержимого текста ID = "демо" элемента <div>:
x.querySelector ( "# демо") innerHTML = "Hello World!" .;
Попробуйте »
Определение и использование
querySelector () метод возвращает указанный селектор CSS первый дочерний элемент соответствующий элемент.
Примечание: метод querySelector () просто возвращает первый элемент , который соответствует указанному селектору. Если вы хотите вернуть все элементы сопоставления, используйте метод querySelectorAll () вместо этого.
Для получения дополнительной CSS селекторов, вы можете посетить наш CSS селекторы учебник и наши CSS селекторы справочное руководство .
Поддержка браузеров
Цифры в таблице представляют собой первый браузер, поддерживающий номер версии метода.
| способ | |||||
|---|---|---|---|---|---|
| querySelector () | 4.0 | 8.0 | 3.5 | 3.1 | 10,0 |
грамматика
Параметр Значение
| параметры | тип | описание |
|---|---|---|
| CSS селекторы | строка | Must. Укажите один или несколько одинаковых элементов в CSS селекторов. Вы можете использовать свои удостоверения личности, классы, типы, атрибуты, значения атрибутов и т.д., чтобы выбрать элементы. Для нескольких селекторов, разделенных запятыми, чтобы вернуть соответствующий элемент. Совет: Для получения дополнительной CSS селекторов смотрите наши CSS селекторы справочное руководство . |
технические детали
| версия DOM: | Уровень селекторы 1 Элемент объекта |
|---|---|
| Возвращает: | Первый соответствующий элемент, указанный селектор CSS. Если не найден, то возвращается NULL. Если вы указали неверный селектор исключение SYNTAX_ERR выбрасывается. |
Другие примеры
примеров
Изменить элемент <div> в содержимое элемента первая <р> в:
x.querySelector ( "р") innerHTML = "Hello World!" .;
Попробуйте »
примеров
Изменить <DIV> в первый класс = "Пример" содержание подэлементов:
x.querySelector ( "пример"). innerHTML = "Hello World!" .;
Попробуйте »
примеров
Изменить элемент <div> в первом классе = "пример" элемента <p>:
x.querySelector ( "p.example") innerHTML = "Hello World!" .;
Попробуйте »
примеров
Добавить красную границу, как элемент <DIV> имеет первый целевой атрибут <a> элементы:
. X.querySelector ( "а [цель]") style.border = "10px сплошной красный";
Попробуйте »
примеров
Следующий пример демонстрирует использование множества селекторов.
Предположим, вы выбираете два селектора: <h2> и элемент <h3>.
Первые <h2> элемент для элемента следующий код <div>, чтобы добавить цвет фона:
<H2> а элемент h2 </ h2>
<H3> а h3 элемент </ h3>
</ Div>
переменная х = document.getElementById ( "myDIV");
x.querySelector ( "h2, h3") style.backgroundColor = "красный" .;
Попробуйте »
Тем не менее, если элемент <DIV> <h3> элемент <h2> элемент перед тем, <h3> элемент будет установлен, чтобы определить цвет фона.
<H3> а h3 элемент </ h3>
<H2> а элемент h2 </ h2>
</ Div>
переменная х = document.getElementById ( "myDIV");
x.querySelector ( "h2, h3") style.backgroundColor = "красный" .;
Попробуйте »
Похожие страницы
JavaScript Справочное руководство: document.querySelector ()