Примечание: ниже расположен перевод заметки DOM selectors API in Firefox 3.5 от John Resig (автора jQuery и евангелиста веб-стандартов в Mozilla), в которой освещается текущая поддержка браузерами стандартов в этом направлении и некоторые вопросы в плане производительности. Мои комментарии далее курсивом.
Предварительная версия документа API для селекторов, опубликованная консорциумом W3C представляет собой относительно новый взгляд для JavaScript-разработчиков, как можно выбирать DOM-элементы на страницы при помощи CSS-селекторов. В одном этом документе собраны все тонкости такого сложного процесса, как поиск, выборка элементов из DOM-дерева и представление результата, доступного по упорядоченному интерфейсу.
Несмотря на все недавние войны по поводу интеграции стандартов в браузеры, этот является одним из наиболее поддерживаемых: его можно использовать прямо сегодня в браузерах Internet Explorer 8, Chrome и Safari, а также в Firefox 3.5 и Opera 10.
querySelectorAllAPI для селекторов предоставляет два метода для всех DOM-документов, элементов и фрагментов (удивительно удобно, на самом деле, даже два — это немного перебор, но иначе получение уникальных элементов на странице каждый раз выливалось бы в дополнительный JavaScript-код): querySelector и querySelectorAll. Оба метода практически идентичны: оба принимают CSS-селектор и возвращают DOM-элементы (за исключением того что querySelector возвращает только первый найденный элемент).
Например, давайте рассмотрим следующий участок HTML-кода:
<div id="id" class="class">
<p>First paragraph.</p>
<p>Second paragraph.</p>
</div>Мы можем использовать querySelectorAll, чтобы сделать красным фон всех параграфов внутри div с идентификатором id.
var p = document.querySelectorAll("#id p");
for ( var i = 0; i < p.length; i++ ) {
p[i].style.backgroundColor = "red";
}А также мы можем найти самый первый параграф этого div, который является его прямым потомком и у которого задан класс class. Ему мы присвоим класс first.
document.querySelector("div.class > p:first-child")
.className = "first";В повседневной жизни описанные процедуры могут быть весьма запутанными в связи с большим объемом JavaScript- / DOM-кода, приводя к многострочным записям и множеству выборок для достижения какой-либо цели. Сразу стоит отметить, что хотя производительность CSS-селекторов уже интегрирована в браузеры, но ее быстродействие (особенно для ряда сложных случаев CSS3-спецификации) может быть весьма низкой. Для преодоления этой проблемы необходимо использовать кэширующие техники, которые реализованы, например, в YASS.
Хотя внешне использовать методы API для селекторов весьма просто (каждый принимает только один аргумент на вход), проблемы наступают при выборе подходящей спецификации CSS-селекторов. API для селекторов привязано (и это на самом деле очень хорошо: представьте ситуацию, что браузер в CSS-коде понимал бы один набор селекторов, а при использовании JavaScript предоставлял бы уже совершенно другой доступный набор) к естественному движку CSS-селекторов в браузере, который используется для применения стилей для конкретных элементов. Для большинства браузеров (Firefox, Safari, Chrome и Opera) это означает, что у вас есть доступ к полной гамме CSS3-селекторов. В то же время Internet Explorer 8 обеспечивает более ограниченный функционал и поддерживает только CSS2-селекторы (использовать которые до сих можно только с трудом в силу отсутствия их полноценной поддержки в IE 6/7).
Итак, самой большой проблемой для новых пользователей API для селекторов является выбор корректной CSS-спецификации для использования. Особенно это актуально для большинства разработчиков, который пишут кроссбраузерный код и поэтому ориентируются на CSS1-набор, работающий во всех браузерах.
Изучение спецификаций CSS2- и CSS3-селекторов будет отличным шагом в увеличении своего багажа знаний, но ниже также приведено несколько полезных ссылок для дальнейшего (или параллельного) изучения:
Наиболее часто встречающийся случай применения API для CSS-селекторов, это не прямое его использование, а при помощи разнообразных сторонних библиотек, которые также обеспечивают функциональность CSS-селекторов для DOM. Сегодня основная проблема внедрения использования API для селекторов заключается в том, что оно не поддерживаются во всех браузерах, для которых ведется разработка (в частности, это IE 6, IE 7 и Firefox 3). Поэтому пока эти браузеры еще не вышли из обращения, нам будут требоваться некоторые промежуточные утилиты для восстановления недостающей функциональности CSS-селекторов для DOM.
Однако, к счастью, на данный момент таких библиотек — огромное число, и все они поддерживают инетрфейс выбора элементов совместимый с API для селекторов API (на самом деле последнее возникло как раз из рассмотрения текущей ситуации с выбором элементом и предложением интеграции в браузеры некоторой часто используемой функциональности). В дополнение в этому существует некоторое количество фреймворков, которые уже переключаются на API для селекторов при наличии его в браузере (поэтому вы можете совершенно спокойно использовать их и не думать о применении каких-либо более эффективных инструментов для ускорения клиентской части вашего сайта). Это означает, что вы можете использовать CSS-селекторы прямо сегодня и получить все возможные преимущества от их повышенного быстродействия в некоторых браузерах за счет API для селекторов, и это обойдется вам совершенно бесплатно.
Некоторые из существующих фреймворков, использующих по возможности API для селекторов:
Стоит также подчеркнуть, что при использование нового API влечет значительный выигрыш в производительности (по сравнению с обычными методами выбора элементов из DOM при помощи JavaScript). Вы сможете самостоятельно убедиться в этом, просто судя по улучшению ситуации в JavaScript-библиотеках, которые начали внедрять новое API для селекторов.
Согласно уже проведенным тестам результаты получаются примерно следующими:
Невооруженным взглядом виден прирост в производительности после внедрения использования нового API для селекторов — то же самое произойдет с вашими веб-приложениями, использующими указанные ферймворки, в современных браузерах.
Чтобы сравнить определение спецификации API для селекторов с фактической реализацией, было создано специальное тестовое окружение (автор — John Resig из Mozilla). Это тестовое окружение может быть в том числе использовано для проверки основных браузеров на уровень соответствия стандартам.
Текущие результаты для браузеров, которые поддерживают это API следующие:
Internet Explorer 8, как уже было упомянуто ранее, не реализовывает логику CSS3-селекторов (в силу того, что спецификация еще не утверждена w3.org), поэтому проваливает большую часть тестов.
По всей видимости, API для селекторов должно обеспечить простой и быстрый путь для выборки DOM-элементов на странице. Это действительно здорово, что все JavaScript-библиотеки используют тот же самый синтаксис и обеспечивают ту же функциональность. Стоит постараться разобраться в этом сейчас и начать использование этого API.
© 2016 ООО ВЕБО