ExtJS. Dom. «Захват» элементов

В данном посте посмотрим как можно захватить элементы Dom по одному и группами, по CSS атрибутам.

 В качестве примера для последующих задач возьмем такую HTML разметку

Как захватить DOM элемент или несколько DOM элементов?

Одним из базовых классов в «захвате» и манипулировании DOM элементами в ExtJS является класс Ext.dom.Element. Многие методы «захвата» DOM элементов в качестве возвращаемого класса выдают как раз, именно Ext.dom.Element, либо просто HTML элемент.

Ext.get() — захват одного элемента по id

В принципе, это достаточно универсальный метод, который позволяет захватить один элемент структуры DOM. Он является псевдонимом (alias) для метода Ext.dom.Element.get(). В качестве параметра можно передать id искомого элемента, а в качестве результата функции  — возвращаемого значения, мы получим Ext.dom.Element.

Пример использования Ext.get()

Ext.query() — получение массива элементов

Цитирую ApiDocs

В данном случае мы получим массив элементов на выходе. Но есть нюанс — второй необязательный параметр asDom, он принимает значения true / false, это значит, что мы будем на выходе получать либо HTML элементы либо элементы класса Ext.dom.Element. В чем разница? Разберем на примере.

Теперь, если мы поставим второй параметр в true, то получим HTML элементы

3-й параметр позволяет указать какое «семейство» тегов мы будем обрабатывать. Изменим немного разметку на следующий вариант.

В этом случае, мы можем указать root параметр функции Ext.query, например так…

Тогда функция Ext.query выберет только внутри «семейства» c id=’parent’.

Ext.select() — получение «композитов» элементов

Цитирую ApiDocs

Основное назначение данного класса — применение методов сразу ко всей выделенной группе. То есть, не нужно элементы загонять в цикл, а достаточно применить метод к множеству выделенных элементов. 

Изменим немного нашу разметку таким образом

Теперь напишем такой код (будем искать все элементы с тегом div, а среди них, с классом .firstclass). Те, которые найдем — заменим одним из методов Ext.dom.Element и подсветим желтым.

В результате получим такой результат

5

Обратиться к конкретному элементу «композита» мы можем следующим образом

Ext.fly()

Цитирую ApiDocs

Если своими словами, то это облегченная версия, по сравнению с Ext.get, которая не использует кэширования и для некоторого «одноразового» использования. Работает по аналогии с Ext.get, который мы рассматривали выше. Я так понимаю эта функция нужна для тех, кто гонится за производительностью своих приложений — разработчики игр, например.

Ext.getBody(),Ext.getDoc(), Ext.getHead()

Эти методы выдают на выходе соответственно body, doc (весь документ целиком) и head в формате Ext.dom.Element

Ext.getDom()

Цитирую ApiDocs

Для меня сначала было непонятно, что такое Node, а оказывается это просто уже найденный элемент Ext.dom.Element. Вот простой пример использования функции Ext.getDom

В принципе, на этом всё, далее ещё пара примеров…

Ещё несколько примеров напоследок

Ещё раз Ext.select

Теперь обратиться к одному или нескольким элементам можно обратиться с помощью инструкции Ext.select

Тут надо не забывать, что Ext.select возвращает несколько элементов сразу, поэтому мы добавляем items(2) , как бы выбираем второй элемент из коллекции.

Либо другим образом

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

Ещё раз Ext.query

На выходе этого метода получаем набор Dom элементов, поэтому можем обращаться напрямую.

Ещё раз Ext.get() или как получить innerHTML элемента, зная его ID?

Ещё раз Ext.get() или как изменить innerHTML элемента, зная его ID?

Мы рассмотрели основные способы «захвата» HTML элементов с помощью библиотеки ExtJS.