Родственные отношения

Объектная модель DHTML раскрывает все родственные отношения, но для некоторых отношений требуется небольшое программирование.

Определить родителя объекта в объектной модели DHTML можно с помощью свойства parentElement.

Для нахождения ближайшего предыдущего родственника для элемента, непосредственно порождаемого другим элементом, следует выполнить действия, определяемые в функции getPreviousSibling(), единственным параметром которой является объект, для которого ищется ближайший предыдущий родственник (в семействе children объекта-родителя):

function getPreviousSibling(Obj){

// Определение родителя

var Parent=Obj.parentElement;

// Определение ближайшего предыдущего родственника

var iLength=Parent.children.length;

for(var i=0;i < iLength;i++){

// родственник найден

if(Parent.children[i]== Obj){

return Parent.children[i-1];

break;

}

}

}

Здесь приходится организовывать цикл по набору childrenобъекта-родителя, пока не встретится исходный объект, для которого ищется ближайший родственник.

Упражнения

1. На странице отображается графическое изображение. Создать для нее сценарии:

а) при расположении указателя мыши над графическим изображением оно заменяется другим, при последующих аналогичных действиях появляется новое изображение (предусмотреть до 5 новых изображений);

б) на странице предусмотреть надпись, например, AUTOMATE, при щелчке на которой изображения начинают сменяться с интервалом в 5 секунд. Предусмотреть возможность останова этого режима;

в) предусмотреть две кнопки: щелчок на первой отображает предыдущее изображение, на второй — следующее. Картинки должны отображаться циклически: после последней первая и далее при щелчке на второй кнопке, а после первой последняя, предпоследняя и далее при щелчке на первой кнопке.

2. На странице присутствует графическое изображение. При наведении указателя мыши на изображение оно автоматически начинает смещаться вправо. При достижении границы окна начинает двигаться по его периметру по часовой стрелке.

3. Создать галерею изображений следующим образом. На странице представлен только список картин. При наведении указателя мыши на любой из элементов списка справа от него отображается соответствующая выбранному пункту картина, когда указатель перемещается на другой пункт списка, то отображается другая картина, а когда указатель покидает область списка, то последняя отображаемая картина исчезает.

4. Создать сценарий, который при щелчке на рисунке сделает его невидимым не сразу, а постепенно "отрезая" от него все увеличивающиеся внешние части.

5. Разработать страницу HTML такую, что при щелчке на некотором заранее определенном элементе за текстом страницы начинает "падать" снег; при последующем щелчке на этом элементе — снег перестает "падать".

Урок 15. Объектная модель документа DOM

Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1-19981001 Консорциума WWW. В ней, как и в модели DHTML, документ представляется в виде логической древовидной структуры, но она предоставляет программисту большие удобства при работе с иерархической структурой объектов документа, чем объектная модель DHTML, позволяя:

· Перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново

· Создавать новые элементы и присоединять их к структуре документа в любом ее месте

· Организовывать и манипулировать новыми или существующими ветвями структуры фрагмента документа до помещения объектов в структурное дерево документа

Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной. Основное – это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями.

Другой важный аспект модели DOM — она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением.

Объектная модель документов, таким образом, как объектная модель, определяет:

· интерфейсы и объекты, используемые для представления документа и манипулирования с ним;

· семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты;

· "родственные" связи и взаимодействие между этими интерфейсами и объектами.