HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов, Дронов Владимир

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

на обложку

Дронов Владимир

Шрифт:

<экземпляр объекта 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 с помощью тега . Разумеется, это не так.

Листинг 15.1

<экземпляр объекта Element>.is(<селектор CSS>)

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

if (elCMain.is("P"))

var s = "Это абзац."

else

var s = "Это не абзац. Тьфу на него!";