Latest web development tutorials
×

JavaScript & HTML DOM справочное руководство

обзор

JavaScript объекты

JavaScript Array объекты JavaScript Boolean объекты JavaScript Date объекты JavaScript Math объекты JavaScript Number объекты JavaScript String объекты JavaScript RegExp объекты JavaScript Глобальные свойства / функции JavaScript операторы

Browser объекты

Window объекты Navigator объекты Screen объекты History объекты Location объекты

DOM объекты

HTML DOM Document объекты HTML DOM объект Element HTML DOM Атрибут объекта HTML DOM объекты событий

HTML объекты

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

Метод HTML DOM querySelector ()

Ссылка на объект документа Объект Document

примеров

Получить первый элемент документа ID = "демонстрационная":

document.querySelector ( "# демо");

Попробуйте »

Определение и использование

querySelector () метод возвращает элемент в документе, которые соответствуют указанный селектор CSS.

Примечание: метод querySelector () просто возвращает первый элемент , который соответствует указанному селектору. Если вам необходимо вернуть все элементы, используйте метод querySelectorAll () вместо этого.

Дополнительные селекторы CSS, пожалуйста , посетите наш CSS селекторы учебник и наши CSS селекторы справочное руководство .

Поддержка браузеров

Цифры в таблице представляют собой первый браузер, поддерживающий номер версии метода.

способ
querySelector () 4.0 8.0 3.5 3.1 10,0

грамматика

document.querySelector (CSS селекторы)

Параметр Значение

параметры тип описание
CSS селекторы строка Must. Укажите один или несколько одинаковых элементов в CSS селекторов. Вы можете использовать свои удостоверения личности, классы, типы, атрибуты, значения атрибутов и т.д., чтобы выбрать элементы.

Для нескольких селекторов, разделенных запятыми, чтобы вернуть соответствующий элемент.

Совет: Для получения дополнительной CSS селекторов смотрите наши CSS селекторы справочное руководство .

технические детали

версия DOM: Уровень селекторы Объект 1 Документ
Возвращает: Первый соответствующий элемент, указанный селектор CSS. Если не найден, то возвращается NULL. Если вы указали неверный селектор исключение SYNTAX_ERR выбрасывается.

Другие примеры

примеров

Будучи первым документом, в элементе <p>:

document.querySelector ( "р");

Попробуйте »

примеров

Получить класс документа = "пример" первый элемент:

document.querySelector ( "пример.");

Попробуйте »

примеров

Получить класс документа = "пример" первый элемент <p>:

document.querySelector ( "p.example");

Попробуйте »

примеров

Получить документ имеет "целевой" атрибут первые элементы <a>:

document.querySelector ( "а [цель]");

Попробуйте »

примеров

Следующий пример демонстрирует использование множества селекторов.

Предположим, вы выбираете два селектора: <h2> и элемент <h3>.

Первый элемент <h2> в следующем коде добавит цвет фона документа:

<H2> а элемент h2 </ h2>
<H3> а h3 элемент </ h3>

document.querySelector ( "h2, h3") style.backgroundColor = "красный" .;

Попробуйте »

Тем не менее, если ваш документ элемент <h3> является <h2> элемент перед тем, <h3> элемент будет установлен, чтобы определить цвет фона.

<H3> а h3 элемент </ h3>
<H2> а элемент h2 </ h2>

document.querySelector ( "h2, h3") style.backgroundColor = "красный" .;

Попробуйте »

Похожие страницы

JavaScript Справочное руководство: Элемент .querySelector ()

Ссылка на объект документа Объект Document