Упрощение выбора элементов за счет использования селекторных функций

Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

HTML5 вводит не только новые семантические элементы, но и новые упрощен- ные способы поиска элементов в DOM-модели страниц. В табл. 1.3 приведены предыдущие версии методов объекта document, с помощью которых разработчики могли находить на странице нужные элементы.

Рис. 1.2. Страница HTML5 с новыми семантическими элементами разметки

Страница HTML5 с новыми семантическими элементами разметки

Таблица 1.3. Предыдущие методы JavaScript, предназначенные для поиска элементов

Метод Описание Пример
getElementByld() Возвращает элемент с указанным значением атрибута id <div id="foo"> getElementByld("foo");
getElementsByName() Возвращает все элементы с атрибутами name, имеющими указанное значение «input type="text" name="foo"> getElementsByName("foo");
getElementsByTagName() Возвращает все элементы, имя дескриптора которых соответствует указанному значению <input type="text"> getElementsByTagName("input");

Новые селекторные функции предлагают более точные способы указания искомых элементов, не требующие применения циклов и итеративного просмотра документа с помощью стандартной DOM-модели. В качестве возможностей поиска одного или нескольких элементов на странице HTML5 предоставляет те же селекторы, что и CSS. Например, в CSS уже имеются удобные селекторы для выбора элементов на основании признаков их вложенности, родства или наследования. В самых последних версиях добавлена поддержка дополнительных псевдоклассов (активизирован ли объект, отключен или отмечен) и почти любой комбинации их свойств и иерархических отношений, какую только можно себе представить. Для выбора элементов в DOM-дереве с применением селекторов CSS просто используйте один из методов, представленных в табл. 1.4.

Таблица 1.4. Новые селекторные функции

Метод Описание Пример Результат
querySelector() Возвращает первый из встреченных на странице элементов, который соответствует указанному селектору (селекторам) querySelector ("input.error"); Возвращает первый встреченный элемент ввода, имеющий класс error
querySelector-All() Возвращает все элементы, соответствующие указанному селектору (селекторам) querySelectorAll ("#results td"); Возвращает ячейки таблицы, находящиеся внутри элемента с идентификатором id, равным results

Обмениваться, хранить, передавать Ваши файлы стало просто как никогда.
yandex-disk

Читать подробнее: для чего Yandex-Диск проекту Mini-Server. Практика установки, настройки и использования сетевого хранилища на Ubuntu server LTS 12.04 в статье Резервное копирование сервера Ubuntu на Яндекс Диск.

>> Ubuntu 12.04 + Nginx Скачать сервер
>> Fedora 15 Скачать сервер
>> Простой Debian 6.0.6 Скачать сервер
>> CentOS 6.0 и
+ (5.6) другой
Скачать сервер
>> OpenSUSE 11.4
MAX
Скачать сервер

Вход на сайт

ВНИМАНИЕ!

Регистрация на сайте только по согласованию с администратором ресурса. Обращаться через форму обратной связи.