Каскадные таблицы стилей CSS имеют очень мощные синтаксические конструкции, известные как селекторы, позволяющие описывать элементы или множества элементов документа. Полное описание синтаксиса селекторов CSS выходит далеко за рамки этой книги [34] , однако несколько примеров помогут прояснить их основы. Элементы можно описать с помощью имени тега и атрибутов
id
и
class
:
#nav // Элемент с атрибутом id="nav"
34
Определение
селекторов CSS3 можно найти по адресу http://www.w3.org/TR/css3-selec-tors/.
div // Любой элемент <div>
.warning // Любой элемент с идентификатором "warning" в атрибуте class
В более общем случае элементы можно выбирать, опираясь на значения атрибутов:
p[lang="fr”] // Абзац с текстом на французском языке: <р lang="fr">
*[name="x"] // Любой элемент с атрибутом nаше="х"
Эти простейшие селекторы можно комбинировать:
span.fatal.error // Любой элемент <span> с классами "fatal" и "error"
span[lang="fг"].warning // Любое предупреждение на французском языке
С помощью селекторов можно также определять взаимоотношения между элементами:
#log span // Любой элемент <span>, являющийся потомком элемента с id="log"
#log>span // Любой элемент <span>, дочерний по отношению к элементу с id=”log"
body>h1:first-child // Первый элемент <h1>, дочерний по отношению к <body>
Селекторы можно комбинировать для выбора нескольких элементов или множеств элементов:
div, #log // Все элементы <div> плюс элемент с id=”log"
Как видите, селекторы CSS позволяют выбирать элементы всеми способами, описанными выше: по значению атрибута
id
и
name
, по имени тега и по имени класса. Наряду со стандартизацией селекторов CSS3, другой стандарт консорциума W3C, известный как «Selectors АРІ» (API селекторов), определяет методы JavaScript для получения элементов, соответствующих указанному селектору. [35]
35
Стандарт «Selectors АРІ» не является частью стандарта HTML5, но тесно связан с ним. Подробности смотрите по адресу http://www.w3.org/TR/selectors-api/.
Ключевым в этом API является метод
querySelectorAll
объекта
Document
. Он принимает единственный строковый аргумент с селектором CSS и возвращает объект
NodeList
, представляющий все элементы документа, соответствующие селектору. В отличие от ранее описанных методов выбора элементов, объект
NodeList
, возвращаемый методом
querySelectorAll
, не является «живым»: он хранит элементы, которые соответствовали селектору на момент вызова метода, и не отражает последующие изменения в документе. В случае отсутствия элементов, соответствующих селектору, метод
querySelectorAll
вернет пустой
NodeList
. Если методу
querySelectorAll
передать недопустимую строку, он возбудит исключение.
В дополнение к методу
querySelectorAll
объект документа также определяет метод
querySelector
, подобный методу
querySelectorAll
, - с тем отличием, что он возвращает только первый (в порядке следования в документе) соответствующий элемент или
null
, в случае отсутствия соответствующих элементов.
Эти два метода также определяются классом
Elements
(и классом
DocumentFragment
, о котором рассказывается в разделе 15.6.4). Когда они вызываются относительно элемента, поиск соответствия заданному селектору выполняется во всем документе, а затем результат фильтруется так, чтобы в нем остались только потомки использованного элемента. Такой подход может показаться противоречащим здравому смыслу, так как он означает, что строка селектора может включать предков элемента, для которого выполняется сопоставление.
Обратите внимание, что стандарт CSS определяет псевдоэлементы
:first-line
и
:first-letter
. В CSS им соответствуют не фактические элементы, а части текстовых узлов. Они не будут обнаруживать совпадений, если использовать их вместе с методом
querySelectorAll
или
querySelector.
Кроме того, многие броузеры не возвращают результатов сопоставления с псевдоклассами
:link
и
:visited
, потому что в противном случае это позволило бы получить информацию об истории посещений страниц пользователем.
Методы
querySelector
и
querySelectorAll
поддерживают все текущие броузеры. Тем не менее обратите внимание, что спецификации этих методов не требуют поддержки селекторов CSS3: производителям броузеров предлагается реализовать поддержку того же набора селекторов, который поддерживается в каскадных таблицах стилей. Текущие броузеры, кроме IE, поддерживают селекторы CSS3. IE7 и 8 поддерживают селекторы CSS2. (Ожидается, что IE9 будет поддерживать CSS3.)
Метод
querySelectorAll
является идеальным инструментом выбора элементов: это очень мощный механизм, с помощью которого клиентские программы на языке JavaScript могут выбирать элементы документа для выполнения операций над ними. К счастью, селекторы CSS можно использовать даже в броузерах, не имеющих собственной поддержки метода
querySelectorAll.
Похожий механизм запросов на основе селекторов в библиотеке jQuery (глава 19) является центральной парадигмой программирования. Веб-приложения на основе jQuery могут использовать переносимый, совместимый с разными типами броузеров эквивалент метода
querySelectorAll,
который называется
$.
Программный код, выполняющий в библиотеке jQuery сопоставление с селекторами CSS, был реструктурирован и вынесен в самостоятельную библиотеку с именем Sizzle, которая была заимствована фреймворком Dojo и другими клиентскими библиотеками. [36]
Преимущество использования библиотек, таких как Sizzle (или библиотек, использующих Sizzle), в том, что выбор элементов можно производить даже в старых броузерах, и при этом обеспечивается поддержка базового набора селекторов, которые гарантированно будут работать во всех броузерах.
36
Самостоятельная версия библиотеки Sizzle доступна по адресу http://sizzlejs.com.