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>. Разумеется, это не так.
Листинг 15.1
<экземпляр объекта Element>.is(<селектор CSS>)
var elCMain = Ext.get("cmain");
if (elCMain.is("P"))
var s = "Это абзац."
else
var s = "Это не абзац. Тьфу на него!";
Получение и задание размеров и местоположения элемента Web-страницы
Добравшись до нужного элемента Web-страницы, мы можем начать работать с ним, например, получить и задать его размеры и местоположение с помощью описанных в этом разделе методов объекта Element.
Методы getWidth и getHeight возвращают, соответственно, ширину и высоту данного элемента Web-страницы в виде числа в пикселах:
<экземпляр объекта Element>.getWidth|getHeight([true])
Если этим методам не передавать никаких параметров, они вернут полную ширину и высоту элемента Web-страницы, с учетом рамки и внутренних отступов. Если же им передать значение true, они вернут ширину и высоту только содержимого элемента, без учета рамки и внутренних отступов.
Пример:
var iWidth = Ext.get("cmain"). getWidth();
В переменной iWidth окажется полная ширина контейнера cmain.
Методы setWidth и setHeight задают, соответственно, ширину и высоту данного элемента Web-страницы:
<экземпляр объекта Element>.setWidth|setHeight(<значение>)
Единственный параметр, передаваемый данным методам, — числовое значение ширины или высоты в пикселах:
Ext.get("cmain"). setWidth(700);
Методы getX и getY возвращают, соответственно, горизонтальную и вертикальную
координаты верхнего левого угла данного элемента Web-страницы в виде числа в пикселах. Координаты, возвращенные этими методами, отсчитываются относительно верхнего левого угла Web-страницы. Параметров эти методы не принимают.
Пример:
var elCMain = Ext.get("cmain");
var x = elCMain.getX();
var y = elCMain.getY();
Метод getOffsetTo возвращает смещение по горизонтали и вертикали данного элемента Web-страницы относительно другого элемента:
<экземпляр объекта Element>.getOffsetTo(<экземпляр объекта Element>)
В качестве параметра этому методу передается экземпляр объекта Element, представляющий элемент Web-страницы, относительно которого нужно узнать смещение данного элемента.
Метод getOffsetTo возвращает массив из двух элементов (чисел в пикселах): первый представляет смещение по горизонтали, второй — по вертикали.
Пример
var m = Ext.get("cmain"). getOffsetTo(Ext.get("cnavbar"));
var x = m[0];
var y = m[1];
Здесь мы получим в переменных x и y, соответственно, горизонтальное и вертикальное смещения контейнера cmain относительно контейнера cnavbar.
Получение размеров Web-страницы и клиентской области окна Web-обозревателя
Также часто бывает нужно узнать размеры всей Web-страницы и внутренней части окна Web-обозревателя, в которой выводится содержимое Web-страницы (клиентской области окна). Для этого предназначены методы особого объекта Ext.lib.Dom.
Методы getDocumentWidth и getDocumentHeight возвращают полную, соответственно, ширину и высоту Web-страницы в числовом виде в пикселах. Параметров они не принимают:
var pageWidth = Ext.lib.Dom.getDocumentWidth();
var pageHeight = Ext.lib.Dom.getDocumentHeight();
Методы getViewportWidth и getViewportHeight возвращают полную, соответственно, ширину и высоту клиентской области окна Web-обозревателя также в числовом виде и в пикселах. Параметров они не принимают:
