HTML 5, CSS 3 и Web 2.0. Разработка современных 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.