Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Доступ сразу к нескольким элементам Web-страницы

Доступ сразу к нескольким элементам Web-страницы

Зачастую приходится выполнять одинаковые манипуляции не с одним, а сразу с несколькими элементами Web-страницы, соответствующие одному критерию (обычно это селектор CSS).

Метод select объекта Ext возвращает экземпляр объекта CompositeElementLite, содержащий экземпляры объекта Element, которые представляют все элементы Web-страницы, что удовлетворяют заданному селектору CSS:

Ext.select(<селектор CSS>)

Единственным параметром этому методу передается строка с одним или несколькими селекторами. Если строка содержит несколько селекторов, их отделяют друг от друга запятыми.

Библиотека Ext Core существенно расширяет набор селекторов по сравнению с поддерживаемыми стандартом CSS. Давайте их рассмотрим.

- <имя тега> — элемент, созданный с помощью тега.

- <имя тега 1> <имя тега 2> — элемент, созданный с помощью тега 2 и вложенный в тег 1, не обязательно непосредственно (может быть вложен в другой тег, вложенный в тег 1, или даже в несколько таких тегов последовательно).

- <имя тега 1> > <имя тега 2> или <имя тега 1>/<имя тега 2> — элемент, созданный с помощью тега 2 и непосредственно вложенный в тег 1.

- <имя тега 1> + <имя тега 2> — элемент, созданный с помощью тега 2, которому непосредственно предшествует тег 1 того же уровня вложенности.

- <имя тега 1> ~ <имя тега 2> — элемент, созданный с помощью тега 2, которому предшествует тег 1 того же уровня вложенности, не обязательно непосредственно.

- * — элемент, созданный с помощью любого тега.

-.<имя стилевого класса> — элемент с привязанным стилевым классом.

- [<имя атрибута тега>] — элемент, тег которого включает атрибут.

- [<имя атрибута тега>=<значение>] — элемент, тег которого включает атрибут с заданным значением.

- [<имя атрибута тега>!=<подстрока>] — элемент, тег которого включает атрибут со значением, не равным подстроке.

- [<имя атрибута тега>^=<подстрока>] — элемент, тег которого включает атрибут со значением, начинающимся с заданной подстроки.

- [<имя атрибута тега>$=<подстрока>] — элемент, тег которого включает атрибут со значением, заканчивающимся заданной подстрокой.

- [<имя атрибута тега>*=<подстрока>] — элемент, тег которого включает атрибут со значением, включающим заданную подстроку.

- [<имя атрибута тега>%=2] — элемент, тег которого включает атрибут со значением, которое без остатка делится на 2.

-:first-child — первый потомок данного элемента.

-:last-child — последний потомок данного элемента.

-:only-child — единственный потомок данного элемента.

-:nth-child(<номер>) — потомок данного элемента с заданным номером.

-:nth-child(even) или: even — четные потомки данного элемента.

-:nth-child(odd) или: odd — нечетные потомки данного элемента.

-:first — первый элемент из соответствующих селектору.

-:last — последний элемент из соответствующих селектору.

-:nth(<номер>) — элемент с заданным номером из соответствующих селектору.

-:contains(<подстрока>) — элемент, содержимое которого включает заданную подстроку.

-:nodeValue(<подстрока>) — элемент, содержимое которого равно заданной подстроке.

-:not(<селектор>) — элемент, не удовлетворяющий селектору.

-:has(<селектор>) — элемент, который имеет хотя бы один потомок, удовлетворяющий селектору.

-:next(<селектор>) — элемент, следующий за которым элемент того же уровня вложенности удовлетворяет селектору.

-:prev(<селектор>) — элемент, предшествующий которому элемент того же уровня вложенности удовлетворяет селектору.

- {<имя атрибута стиля>=<значение>} — элемент, стиль которого имеет атрибут с заданным значением.

- {<имя атрибута стиля>!=<подстрока>} — элемент, стиль которого имеет атрибут со значением, не равным заданной подстроке.

- {<имя атрибута стиля>^=<подстрока>} — элемент, стиль которого имеет атрибут со значением, начинающимся с заданной подстроки.

- {<имя атрибута стиля>$=<подстрока>} — элемент, стиль которого имеет атрибут со значением, заканчивающимся заданной подстрокой.

- {<имя атрибута стиля>*=<подстрока>} — элемент, стиль которого имеет атрибут со значением, включающим заданную подстроку.

- {<имя атрибута стиля>%=2} — элемент, стиль которого имеет атрибут со значением, без остатка делящимся на 2.

Если ни один подходящий элемент Web-страницы не был найден, метод select возвращает экземпляр объекта CompositeElementLite, не содержащий ни одного экземпляра объекта Element ("пустую" коллекцию).

Здесь мы получаем экземпляр объекта CompositeElementLite, содержащий экземпляры объекта Element, которые представляют все блочные контейнеры:

var clContainers = Ext.select("DIV");

А здесь мы получаем блочный контейнер cmain:

var clContainers = Ext.select("DIV[id=cmain]");

Здесь мы получаем все пункты "внешнего" списка navbar, формирующего полосу навигации:

var clOuterItems = Ext.select("UL[id=navbar] > LI");

А здесь мы получаем все первые абзацы, непосредственно вложенные в контейнеры:

var clP = Ext.select("DIV > P: first");

Здесь мы получаем все горизонтальные линии, которым непосредственно предшествуют абзацы того же уровня вложенности:

var clHR = Ext.select("P + HR");

А здесь мы получаем все абзацы и теги адреса на Web-странице:

var clPA = Ext.select("P, ADDRESS");

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