. Он принимает единственный строковый аргумент с селектором 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.
15.2.6. document.all[]
До того, как модель DOM была стандартизована, в IE4 была реализована коллекция
document.all[]
, представляющая все элементы (кроме текстовых узлов
Text
) в документе. Впоследствии коллекцию
document.all[]
заменили стандартные методы, такие как
getElementByld
и
getElementsByTagName,
и теперь она считается устаревшей и не должна использоваться. Однако в свое время появление этой коллекции произвело целую революцию, и даже сейчас все еще можно встретить сценарии, использующие ее следующими способами:
document.all[0] // Первый элемент документа
document.all["navbar"] // Элемент (или элементы) со значением "navbar”
// в атрибуте id или name
document.all.navbar // То же самое
document.all.tags("div") // Все элементы <div> в документе
document.all.tags("p”)[0] // Первый элемент <р> в документе
15.3. Структура документа и навигация по документу
После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект
Document
можно представить как дерево объектов
Node
, как изображено на рис. 15.1. Тип
Node
определяет свойства, позволяющие перемещаться по такому дереву, которые будут рассматриваться в разделе 15.3.1. Существует еще один прикладной интерфейс навигации по документу, как дерева объектов
Element
. Этот более новый (и часто более простой в использовании) прикладной интерфейс рассматривается в разделе 15.3.2.
15.3.1. Документы как деревья узлов
Объект
Document
, его объекты
Element
и объекты
Text
, представляющие текстовые фрагменты в документе, - все они являются объектами
Node
. Класс
Node
определяет следующие важные свойства:
parentNode
Родительский узел данного узла или null для узлов, не имеющих родителя, таких как
Document
.
childNodes
Доступный для чтения объект, подобный массиву (
NodeList
), обеспечивающий «живое» представление дочерних узлов.
firstChild, lastChild
Первый и последний дочерние узлы или null, если данный узел не имеет дочерних узлов.
nextSibling, previousSibling
Следующий и предыдущий братские узлы. Братскими называются два узла, имеющие одного и того же родителя. Порядок их следования соответствует порядку следования в документе. Эти свойства связывают узлы в двусвязный список.