78 Часть I. Новый взгляд на Web-приложение
рассмотрен в приложении А).
Взаимосвязь элементов DOM отражает структуру HTML-документа и является двухсторонней. Изменение структуры DOM влияет на HTMLразметку и, следовательно, на представление страницы.
Так выглядит DOM "на верхнем уровне". В следующем разделе вы увидите, как структура DOM представляется интерпретатору JavaScript, и узнаете, как выполнять с ней требуемые действия.
2.4.1 Обработка DOM с помощью JavaScript
В процессе работы пользователя с любым приложением возникает необходимость изменять интерфейс. Это надо, например, для того, чтобы обеспечить обратную связь с пользователем (он должен видеть реакцию на свои действия). Изменения могут потребоваться любые: замена текста статической метки или цвета одного из элементов, вывод диалогового окна и даже обновление значительной части окна и вывод нового набора компонентов. Чаще всего приходится создавать древовидную структуру DOM, предоставляя браузеру HTML-данные (другими словами, формировать Web-страницу).
Документ, который был показан в листинге 2.2 и на рис. 2.3, достаточно сложен. Мы же начнем обсуждение действий с DOM на простом примере. Предположим, что нам необходимо вывести приветствие пользователю. При первой загрузке страницы мы еще не знаем его имени, поэтому нам понадобится изменить структуру документа несколько позже, добавив имя пользователя. Воздействовать на узлы DOM, вероятнее всего, придется из программы. В листинге 2.3 показан HTML-код простой Web-страницы.
Листинг 2.3. Страница Ajax-приложения hello
<html>
<head>
< ! — |
О Ссылка на |
таблицы стилей —> |
|
< l i n k r e l = ' s t y l e s h e e t ' |
t y p e = ' t e x t / e s s ' |
||
h r e f « • h e l l o . e s s 1 |
/> |
|
|
< ! — |
© Ссылка на |
J a v a S c r i p t - с ц е н а р и й —> |
|
< s c r i p t t y p e = ' t e x t / j a v a s c r i p t ' |
|||
s r c = ' h e l l o . j s ' > < / s c r i p t > |
|||
</head> |
|
|
|
<body> |
|
|
|
<p i d = ' h e l l o ' > h e l l o < / p > |
|
||
<! — |
© Пустой элемент |
—> |
|
<div |
i d = ' e m p t y ' x / d i v > |
|
|
</body>
</html>
В документе содержатся ссылки на два внешних ресурса: каскадные таблицы стилей О и файл, содержащий JavaScript-код ©. Мы также определили пустой элемент div с идентификатором ©. С помощью программы мы можем 5ключить в его состав другие элементы.
Рассмотрим ресурсы, на которые ссылается документ. В CSS-файле определены простые стили, позволяющие выделять пункты списка и изменять
Глава 2. Знакомство с Аjах 79
шрифт и цвет. Содержимое CSS-файла приведено в листинге 2.4.
Листинг 2.4. Содержимое файла hello .css
.declared{ color: red;
font-family: arial; font-weight: normal; font-size: 16px;
}
.programmed! color: blue;
font-family: helvetica; font-weight: bold; font-size: lOpx;
Мы определили два стиля для исходных DOM-узлов. (Имена стилей могут быть произвольными. В данном случае мы выбрали их так, чтобы упростить восприятие примера, но с таким же успехом мы могли использовать имена fred и jim.) Ни один из этих стилей не используется в HTMLдоукменте, но они могут быть применены к элементам в результате выполнения программы. В листинге 2.5 показан JavaScript-код для страницы, представленной в листинге 2.4. Когда документ загружается, программа связывает стиль с существующим узлом и создает новые DOM-элементы.
Листинг 2.5. Содержимое файла h e l l o . j s
window.onload=function(){
// Получение элемента по идентификатору var hello=document.getElementById('hello') ; hello.className='declared' ;
var empty=document.getElementById('empty' ); addNode(empty,"reader of") ;
addNode(empty, "Ajax in Action!"); var children=empty.childNodes;
for (var i=0;i<children.length;i++){ children[i].className='programmed' ;
}
// Непосредственная установка стилей empty.style.border='solid green 2px'; empty.style.width="200px";
}
function addNode(el,text){ // Создание нового элемента
var childEl=document.createElement("div"); el.appendChild(childEl);
// Формирование текста
var txtNode=document.createTextNode(text); childEl.appendChild(txtNode);
80 Часть I. Новый взгляд на Web-приложение
Код JavaScript сложнее для восприятия, чем HTML-документ или стили. Точкой входа в данном случае является функция window.onload(), которая вызывается после загрузки всей страницы. К этому моменту древовидная структура DOM уже сформирована, и мы можем начинать работу с ней. В листинге 2.5 имеется несколько методов, предназначенных для модификации структуры DOM. В частности, с их помощью можно изменять атрибуты, скрывать и вновь отображать DOM-узлы и даже создавать в процессе выполнения программы новые узлы. Мы не будем останавливаться на каждом методе (подробную информацию о них вы сможете найти в источниках, ссылки на которые приведены в конце главы), а ограничимся рассмотрением в последующих разделах некоторых, используемых наиболее часто.
2.4.2. Поиск узла DOM
Первое, что надо сделать для того, чтобы изменить структуру DOM из JavaScript-программы, — найти элементы, которые следует модифицировать. Как было сказано ранее, в начале работы мы имеем лишь ссылку на корневой узел в глобальной переменной document. Все остальные узлы DOM являются дочерними (или более отдаленными потомками) document. Организовать пошаговый просмотр древовидной структуры большого документа — достаточно сложная задача. К счастью, ее можно упростить. Один из самых распространенных приемов — пометить элемент уникальным идентификатором. В функции onloadO, код которой показан в листинге 2.5, мы организуем поиск двух элементов: абзаца, стиль которого изменяем, и пустого элемента <div>, в состав которого включаем новые элементы. В открывающем дескрипторе каждого из этих элементов мы с помощью атрибута id задаем идентификатор.
<р i d = ' h e l l o ' >
и
<div id='empty1></div>
С каждым DOM-узлом можно связать идентификатор и использовать его при вызове функции, как показано ниже.
var hello=document.getElementById('hello') ;
Заметьте, что данный метод принадлежит объекту Document. В простых случаях, подобных рассматриваемому, молено ссылаться на текущий объект Document посредством переменной document. При использовании IFrame появляется несколько объектов Document, и приходится внимательно следить за тем, к какому из них осуществляется обращение.
В некоторых ситуациях необходимо организовать пошаговый обход дерева DOM. Поскольку узлы DOM организованы в виде древовидной структуры, каждый узел может иметь один родительский узел и любое число дочерних узлов. Доступ к ним осуществляется с помощью свойств parentNode и childNodes. Свойство parentNode ссылается на другой объект DOM, a childNodes — на JavaScript-массив узлов, которые приходится просматривать по очереди.
Глава 2. Знакомство с Ajax |
81 |
var children=empty.childNodes;
for (var i=0;Kchildren . length;i++){
Если требуемый узел не помечен уникальным идентификатором, поиск его осуществляется по-другому: с помощью функции getElementsByTagName. Например, в результате вызова document.getElementsByTagName("UL") будет возвращен массив элементов UL, присутствующих в документе.
Последний способ применяется при работе с документом, структуру которого разработчик не может контролировать. Считается, что функция getElementByld дает более надежные результаты, чем getElementsByTagName (), поскольку при ее использовании не приходится учитывать структуру документа, которая может измениться.
2.4.3. Создание узла DOM
Помимо модификации существующих узлов, может возникнуть необходимость создавать новые узлы и включать их в текущий документ (например, в процессе работы программы может потребоваться сформировать сообщение). JavaScript-реализация DOM предоставляет методы для решения этой задачи.
Вернемся к листингу 2.5. В начале работы узел с идентификатором empty пуст. Когда документ загружается, мы динамически формируем содержимое этого узла. В функции addNode () вызываются стандартные методы document .createElement() и document.createTextNode(). Метод createElement (), которому в качестве параметра передается тип дескриптора, создает HTML-элемент.
var childEl=document.createElement("div") ;
Метод createTextNode () формирует DOM-узел, представляющий фрагмент текста. Этот узел обычно является дочерним по отношению к заголовку, элементу div, абзацу или пункту списка.
var txtNode=document.createTextNode("some text");
Согласно стандарту DOM текстовые узлы отличаются от узлов, представляющих HTML-элементы. К ним нельзя непосредственно применять стили, поэтому они занимают меньше памяти, чем обычные узлы. Стиль текста, соответствующего текстовому узлу, определяется стилем родительского DOMэлемента.
Чтобы созданный узел мог отображаться в окне браузера, его надо включить в состав документа. Для этого предусмотрен метод appendChild().
el.appendChild(childEl) ;
Методов createElement(), createTextNode() и appendChild() достаточно для добавления новых узлов в документу. Однако новые узлы нуждаются в стилях. Рассмотрим, какими способами можно добавить их.