Доступ к родительскому, дочерним и соседним элементам 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- страницы и хотим найти его родителя, потомка или "соседей" по уровню вложенности. Для этого 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 = "Это не абзац. Тьфу на него!";

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

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

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