Доступ к нужному элементу Web-страницы / HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

Обложка
Аннотация

Книги автора: Macromedia Flash Professional 8. Графика и анимация HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

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

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

Здесь нам помогут методы объекта 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 нам пригодятся.

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

Оглавление статьи/книги

Похожие страницы