HTML5 вводит не только новые семантические элементы, но и новые упрощен- ные способы поиска элементов в DOM-модели страниц. В табл. 1.3 приведены предыдущие версии методов объекта document, с помощью которых разработчики могли находить на странице нужные элементы.
Рис. 1.2. Страница 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 |
- Назад
- Вперёд >>
