Как видите, селекторы CSS позволяют выбирать элементы всеми способами, описанными выше: по значению атрибута id и name, по имени тега и по имени класса. Наряду со стандартизацией селекторов CSS3, другой стандарт консорциума W3C, известный как «Selectors АРІ» (API селекторов), определяет методы JavaScript для получения элементов, соответствующих указанному селектору.[35]

Ключевым в этом 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), в том, что выбор элементов можно производить даже в старых броузерах, и при этом обеспечивается поддержка базового набора селекторов, которые гарантированно будут работать во всех броузерах.

Оглавление книги