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

В самом деле, перед тем как начать манипулировать элементом Web-страницы, точнее, представляющим его экземпляром объекта Element, нужно как-то получить к нему доступ. Как?

Здесь нам помогут методы объекта Ext, которые мы сейчас рассмотрим.

Методы объекта Ext

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

Ext.get(<значение атрибута тега ID>|<экземпляр объекта HTMLElement>)

Как видим, этот метод принимает один параметр. Им может быть строка, содержащая значение атрибута тега ID, по которому будет выполняться поиск элемента Web-страницы.

Пример:

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

Здесь мы получили экземпляр объекта Element, представляющий "внешний" список navbar, что формирует полосу навигации.

В главе 7 мы узнали, что атрибут тега ID обеспечивает привязку к элементу Web-страницы именованного стиля. Но чаще всего он используется, чтобы дать элементу уникальное в пределах Web-страницы имя. В таком случае говорят, что такой-то элемент Web-страницы имеет такое-то имя, например, "внешний" список, формирующий нашу полосу навигации, имеет имя navbar.

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

Метод get имеет важную особенность, о которой мы обязательно должны знать. Дело в том, что библиотека Ext Core при инициализации объявляет внутренний массив, или, если точнее, хэш (см. главу 14). При первом доступе к какому-либо элементу Web-страницы метод get создает представляющий данный элемент экземпляр объекта Element и помещает его в этот массив. При повторном доступе к тому же самому элементу Web-страницы соответствующий ему экземпляр объекта Element просто извлекается из данного массива. Такой подход позволяет значительно увеличить быстродействие, ведь извлечение элемента массива выполняется много быстрее, чем создание экземпляра объекта.

Сохранение каких-либо структур данных во внутреннем хранилище с целью ускорения к ним доступа называется кэшированием. А само это внутреннее хранилище (в случае библиотеки Ext Core — массив) называется кэшем.

Однако кэширование имеет и недостатки. Предположим, что мы создали Web-страницу с множеством элементов, которыми планируем управлять программно, из Web-сценариев. Причем доступ к каждому из этих элементов мы получаем всего один раз за все время, пока Web-страница открыта в Web-обозревателе, после чего больше их не трогаем. В результате кэш быстро "засорится" экземплярами объекта Element, что представляют не нужные нам более элементы Web-страницы. Что приведет к лишней трате памяти.

Поэтому создатели Ext Core предусмотрели метод fly, применяемый именно в таких случаях:

Ext.fly(<значение атрибута тега ID>|<экземпляр объекта HTMLElement>)

Он полностью аналогичен только что рассмотренному нами методу get с одним исключением — он кэширует элементы Web-страницы (в смысле — представляющие их экземпляры объекта Element) не в массиве, а в обычной переменной. Это значит, что в кэше хранится только элемент Web-страницы, к которому обращались при последнем вызове этого метода:

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

Также метод fly работает быстрее, чем метод get, за счет того, что ему не нужно искать экземпляр объекта Element, соответствующего запрашиваемого элементу Web-страницы, в массиве, который может быть очень большим. Ему достаточно проверить всего одну переменную.

- Метод get следует использовать, если данный элемент Web-страницы понадобится нам в дальнейшем.

- Метод fly полезен, если нам требуется получить доступ к элементу Web-страницы всего один раз.

Не принимающий параметров метод getBody возвращает экземпляр объекта Element, представляющий секцию тела Web-страницы (тег <BODY>):

var elBody = Ext.getBody();

Метод getDom возвращает экземпляр объекта Web-обозревателя HTMLElement, представляющий определенный элемент Web-страницы:

Ext.getDom(<значение атрибута тега ID>|<экземпляр объекта Element>)

Этот метод принимает один параметр, которым может быть строка с именем элемента Web-страницы (значением атрибута ID его тега) или экземпляр объекта Element, представляющий этот элемент.

Пример:

var htelNavbar = Ext.getDom("navbar");

Здесь мы получили экземпляр объекта HTMLElement, представляющий "внешний" список navbar.

Пример:

var elCMain = Ext.get("cmain");
var htelCMain = Ext.getDom(elCMain);

Здесь мы в два этапа получили экземпляр объекта HTMLElement, представляющий контейнер cmain. На первом этапе мы с помощью метода get получили представляющий его экземпляр объекта Element библиотеки Ext Core, а на втором — вызовом метода getDom — экземпляр объекта HTMLElement Web-обозревателя.

Свойство dom объекта Element возвращает экземпляр объекта Web-обозревателя HTMLElement, представляющий элемент Web-страницы:

var elCMain = Ext.get("cmain");
var htelCMain = elCMain.dom;

Некоторые методы объектов библиотеки Ext Core требуют в качестве параметров экземпляр объекта HTMLElement. Так что свойство dom и метод getDom нам пригодятся.


Доступ сразу к нескольким элементам 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");


Доступ к родительскому, дочерним и соседним элементам 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]])

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

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

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

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

Пример:

var elUL = elNavbar.child();

В переменной elUL окажется первый пункт списка navbar.

Пример:

var elUL = elNavbar.child("LI:nodeValue=CSS");

В переменной elUL окажется пункт списка navbar, который содержит текст "CSS".

Метод down отличается от метода child тем, что ищет только среди непосредственных потомков текущего элемента Web-страницы:

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

Параметры метода down те же, что у методов parent и child.

Пример:

var elUL = elNavbar.down();

В переменной elUL окажется первый пункт списка navbar.

Методы next и prev возвращают, соответственно, следующий и предыдущий элемент Web-страницы того же уровня вложенности, что и данный элемент:

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

Параметры этих методов те же, что у методов parent и child.

Пример:

var elDiv = Ext.get("cmain").next();

В переменной elDiv окажется контейнер ccopyright — следующий за контейнером cmain.

Пример:

var elP = elNavbar.prev();

В переменной elP окажется значение null, т. к. список navbar не имеет предыдущих элементов того же уровня вложенности и вообще является единственным потомком своего родителя.

Методы first и last возвращают, соответственно, первый и последний элемент Web-страницы того же уровня вложенности, что и данный элемент:

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

Параметры этих методов те же, что у методов parent и child.

Пример:

var elCHeader = Ext.get("cmain").first();
var elCCopyright = Ext.get("cmain").last();

В переменной elCHeader окажется контейнер cheader, а в переменной elCCopyright — контейнер ccopyright. Это, соответственно, первый и последний из блочных контейнеров — "соседей" контейнера cmain.

Метод is возвращает true, если данный элемент Web-страницы совпадает с заданными селектором, и false в противном случае.

В примере из листинга 15.1 мы проверяем, создан ли контейнер cmain с помощью тега <P>. Разумеется, это не так.

Методы объекта Ext