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