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

Дронов Владимир
Шрифт:

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

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

– {<имя атрибута стиля>%=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");

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

Теперь предположим, что мы наконец-то получили нужный нам элемент Web- страницы и хотим найти его родителя, потомка или "соседей" по уровню вложенности. Для этого Ext Core предоставляет нам множество методов объекта Element, которые будут описаны далее.

Метод parent возвращает родитель данного элемента Web-страницы в виде экземпляра объекта Element:

<экземпляр объекта Element>.parent([<селектор CSS>[, true]])

Первый, необязательный, параметр задает селектор CSS, которому должен удовлетворять родитель, в виде строки; можно также указать несколько селекторов через запятую. Если непосредственный родитель не удовлетворяет этому селектору, метод проверит родитель родителя и т. д., пока не будет найден подходящий элемент или достигнут тег с нулевым уровнем вложенности (тег <HTML>).

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

Если вторым, также необязательным, параметром передано значение true, метод parent вернет экземпляр объекта Web-обозревателя HTMLElement.

Если подходящий родитель найден не будет, метод вернет значение null.

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

var elNavbar = Ext.get("navbar");

var elCNavbar = elNavbar.parent;

Им окажется контейнер cnavbar.

А здесь мы пытаемся получить родителя списка navbar, который создан с помощью тега <SPAN>:

var elSpan = elNavbar.parent("SPAN");

Поскольку такого родителя у списка не существует, в переменной elSpan окажется значение null.

Метод select позволяет получить коллекцию дочерних элементов для данного элемента, удовлетворяющих заданному селектору, в виде экземпляра объекта CompositeElementLite:

<экземпляр объекта Element>.select(<селектор CSS>)

Единственным параметром этому методу передается строка с селектором или селекторами CSS.

Пример:

var clUL = elNavbar.select("LI > UL");

В переменной clUL окажется коллекция пунктов списка navbar, которые содержат вложенные списки.

Метод child возвращает первый встретившийся потомок данного элемента Web-страницы в виде экземпляра объекта Element:

<экземпляр объекта Element>.child([<селектор CSS>[, true]])