|
Определить таблицу |
<TABLE></TABLE> |
|
|
Окантовка таблицы |
<table border=?></TABLE> |
|
|
Расстояние между ячейками <TABLE CELLSPACING=?> |
|
|
|
Дополнение ячеек |
<TABLE CELLPADDING=?> |
|
|
Желаемая ширина |
<TABLE WIDTH=?> |
(в точках) |
|
Ширина в процентах |
<TABLE WIDTH="%"> |
(проценты от ширины страницы) |
|
Строка таблицы |
<TR></TR> |
|
|
Выравнивание |
<TR ALIGN=LEFT|RIGHT| |
|
|
|
CENTER|MIDDLE|BOTTOM> |
|
|
Ячейка таблицы |
<TD></TD> |
(должна быть внутри строки) |
|
Выравнивание |
<TD ALIGN=LEFT|RIGHT| |
|
|
|
CENTER|MIDDLE|BOTTOM> |
|
|
Без перевода строки |
<TD NOWRAP> |
|
|
Растягивание по колонке |
<TD COLSPAN=?> |
|
|
Растягивание по строке |
<TD ROWSPAN=?> |
|
N1.1 |
Желаемая ширина |
<TD WIDTH=?> |
(в точках) |
N1.1 |
Ширина в процентах |
<TD WIDTH="%"> |
(проценты от ширины страницы) |
N3.0b |
Цвет ячейки |
<TD BGCOLOR="#$$$$$$"> |
|
|
Заголовок таблицы |
<TH></TH> |
(как данные, но жирный шрифт и |
|
|
|
центровка) |
|
Выравнивание |
<TH ALIGN=LEFT|RIGHT| |
|
|
|
CENTER|MIDDLE|BOTTOM> |
|
|
Без перевода строки |
<TH NOWRAP> |
|
|
Растягивание по колонке |
<TH COLSPAN=?> |
|
|
Растягивание по строке |
<TH ROWSPAN=?> |
|
N1.1 |
Желаемая ширина |
<TH WIDTH=?> |
(в точках) |
N1.1 |
Ширина в процентах |
<TH WIDTH="%"> |
(проценты ширины таблицы) |
N3.0b |
Цвет ячейки |
<TH BGCOLOR="#$$$$$$"> |
|
|
Заглавие таблицы |
<CAPTION></CAPTION> |
|
|
Выравнивание |
<CAPTION ALIGN=TOP|BOTTOM> |
(сверху/снизу таблицы) |
ФРЕЙМЫ |
|
|
|
|
|
|
|
N2.0 |
Документ с фреймами |
<FRAMESET></FRAMESET> |
(вместо <BODY>) |
N2.0 |
Высота строк |
<FRAMESET ROWS=,,,></FRAMESET> |
(точки или %) |
N2.0 |
Высота строк |
<FRAMESET ROWS=*></FRAMESET> |
(* = относительный размер) |
N2.0 |
Ширина колонок |
<FRAMESET COLS=,,,></FRAMESET> |
(точки или %) |
N2.0 |
Ширина колонок |
<FRAMESET COLS=*></FRAMESET> |
(* = относительный размер) |
N3.0b |
Ширина окантовки |
<FRAMESET BORDER=?> |
|
N3.0b |
Окантовка |
<FRAMESET FRAMEBORDER="yes|no"> |
|
N3.0b |
Цвет окантовки |
<FRAMESET BORDERCOLOR="#$$$$$$"> |
|
N2.0 |
Определить фрейм |
<FRAME> |
(содержание отдельного фрейма) |
N2.0 |
Документ |
<FRAME SRC="URL"> |
|
N2.0 |
Имя фрейма |
<FRAME NAME="***"|_blank|_self| |
|
|
|
_parent|_top> |
|
N2.0 |
Ширина границы |
<FRAME MARGINWIDTH=?> |
(правая и левая границы) |
N2.0 |
Высота границы |
<FRAME MARGINHEIGHT=?> |
(верхняя и нижняя границы) |
N2.0 |
Скроллинг? |
<FRAME SCROLLING="YES|NO|AUTO"> |
|
N2.0 |
Постоянный размер |
<FRAME NORESIZE> |
|
N3.0b |
Окантовка |
<FRAME FRAMEBORDER="yes|no"> |
|
N3.0b |
Цвет окантовки |
<FRAME BORDERCOLOR="#$$$$$$"> |
|
N2.0 |
Содержание без фреймов <NOFRAMES></NOFRAMES> |
(для просмотрщиков не поддерживающих |
|
|
|
|
фреймы) |
ЯЗЫК JAVA
Applet |
<APPLET></APPLET> |
|
|
Applet - имя файла |
<APPLET CODE="***"> |
|
|
Параметры |
<APPLET PARAM NAME="***"> |
|
|
Applet - адрес |
<APPLET CODEBASE="URL"> |
|
|
Applet - имя |
<APPLET NAME="***"> |
(для ссылок из других частей страницы) |
|
Альтернативный текст |
<APPLET ALT="***"> |
(для программ не поддерживающих Java) |
|
Выравнивание |
<APPLET ALIGN="LEFT|RIGHT|CENTER"> |
||
Размеры |
<APPLET WIDTH=? HEIGHT=?> |
(в точках) |
|
Отступ |
<APPLET HSPACE=? VSPACE=?> |
(в точках) |
|
РАЗНОЕ |
|
|
|
|
|
|
|
Комментарий |
<!-- *** --> |
(игнорируется просмотрщиком) |
|
Пролог HTML 3.2 |
<!DOCTYPE HTML PUBLIC "- |
|
|
|
//W3C//DTD HTML 3.2//EN"> |
|
|
Поиск |
<ISINDEX> |
(означает начальную точку поиска) |
|
Приглашение |
<ISINDEX PROMPT="***"> |
(текст приглашения для поля ввода) |
|
Запустить поиск |
<A HREF="URL?***"></a> |
(используйте действительно знак вопроса) |
|
URL этого файла |
<BASE HREF="URL"> |
(должно быть в заголовке) |
|
N2.0 Имя базового окна |
<BASE TARGET="***"> |
(должно быть в заголовке) |
|
Отношение |
<LINK REV="***" REL="***" |
(должно быть в заголовке) |
|
|
HREF="URL"> |
|
|
Метаинформация |
<META> |
(должно быть в заголовке) |
|
Стили |
<STYLE></STYLE> |
(часто не поддерживается) |
|
Программа |
<SCRIPT></SCRIPT> |
(часто не поддерживается) |
|
Объектная модель документа DOM
Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1- 19981001 Консорциума WWW. В ней, как и в модели DHTML, документ представляется в виде логической древовидной структуры, но она предоставляет программисту большие удобства при работе с иерархической структурой объектов документа, чем объектная модель DHTML, позволяя:
Перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново Создавать новые элементы и присоединять их к структуре документа в любом ее месте
Организовывать и манипулировать новыми или существующими ветвями структуры фрагмента документа до помещения объектов в структурное дерево документа Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления
документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной. Основное - это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями.
Другой важный аспект модели DOM - она оперирует с объектами в полном соответствии с традиционными объектноориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением. Объектная модель документов, таким образом, как объектная модель, определяет:
интерфейсы и объекты, используемые для представления документа и манипулирования с ним; семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты; "родственные" связи и взаимодействие между этими интерфейсами и объектами.
Узлы объектной модели DOM
Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.
Узлы в модели DOM документа HTML могут быть следующих типов:
Тип |
Что представляет |
|
|
|
|
1 |
Элемент HTML |
|
3 |
Текстовое содержимое тега HTML |
|
|
|
8 |
Комментарий HTML |
9 |
Корневой элемент иерархической структуры |
11 |
Фрагмент документа |
Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:
Рис. 1
Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).
Текстовое содержимое элемента HTML хранится в специальном текстовом узле (тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов. Например, рассмотрим следующий фрагмент документа HTML:
<P>Это <B>содержимое</B> абзаца <I>документа</I> HTML</P>
В объектной модели DOM он будет представлен следующим иерархическим деревом:
Рис. 2
На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария
(свойство nodeName равно#comment), являющихся листьями иерархического дерева объектов документа. Перемещение по объектной модели
К узлам, и даже целым ветвям, можно получить доступ из сценария JavaScript, встроенного в документ. Концепция объектной модели документа позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это приводит к более простому и ясному коду по сравнению с кодом, реализующим изменение структуры документа в объектной модели
DHTML.
На примере структуры, создаваемой вложенными списками, продемонстрируем, с помощью каких свойств объектов в модели DOM можно перемещаться по ее узлам:
<UL ID="parent">
<LI ID="Node1">Узел 1
<LI ID="Node2">Узел 2 <UL ID="inside">
<LI ID="Child1">Потомок 1
<LI ID="Child2">Потомок 2
<LI ID="Child3">Потомок 3 </UL>
<LI ID="Node3">Узел 3 </UL>
В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями "родства", показанной на рисунке:
Рис. 3
Элементы с именами Node1, Node2 и Node3 являются узлами-потомками элемента-родителя с именем parent. В семействе childNodes объекта parent хранятся ссылки на всех потомков этого элемента (Node1, Node2 и Node3). Для получения ссылок на первого и последнего потомка узла в объектной модели предусмотрены соответственно свойстваfirstChild и lastChild.
Свойство parentNode объектов-потомков возвращает ссылку родителя объектов, поэтому значением этих свойств объектов Node1, Node2 и Node3 будет ссылка на узел parent.
Объекты Node1, Node2 и Node3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью своих свойств previousSibling (предыдущий ближайший родственник) и nextSibling (следующий ближайший родственник). Если у элемента-узла нет соответствующих ближайших родственников, то эти свойства возвращают значение null.
Конечно, если все элементы HTML документа заданы с уникальными атрибутами ID, то разработчику документа достаточно просто в сценариях получать ссылки на такие объекты-узлы (значение атрибута ID элемента является именем соответствующего ему объекта в языках сценариев с использованием модели DHTML и DOM). Но идентифицировать все элементы страницы дело утомительное, поэтому для перемещения по объектной модели можно использовать указанные выше свойства узлов.
Для изменения, установки или получения содержимого текстового узла (узлы остальных типов не имеют текстового содержимого ) в DOM используется свойство nodeValue, тогда как в модели DHTML следует применять свойстваinnerHTML и innerText для любого элемента HTML:
//Объектная модель DOM Node.childNodes[0].nodeValue = "Новое содержимое";
//Модель DHTML
Node.innerHTML = "Новое содержимое";
Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В DOM текстовое содержимое элемента HTML может храниться в одном или нескольких узлах-потомках типа 3, непосредственно порождаемых элементом HTML. Тогда как в объектной модели DHTML достаточно использовать одно из
свойств innerHTML илиinnerText объекта, соответствующего элементу HTML.
Для доступа к объектной модели DOM загруженной в браузер страницы HTML прежде всего необходимо иметь ссылку на корневой элемент #document. Она создается автоматически и хранится в объекте window.document. Получить в DOM ссылку на корневой объект документа, соответствующий элементу, задаваемому тегом <HTML> можно единственным способом - использовать свойство documentElement объекта document. После чего, используя приведенные выше свойства узлов DOM, переместиться к требуемому элементу HTML и его содержимому.
Изменение объектной модели документа Каждый узловой элемент порождается другим узловым элементом и может сам выступить родителем других узлов-
элементов (за исключением узла #text). Объектная модель DOM предоставляет возможность в сценарии создать узел,
соответствующий любому элементу HTML, задать значения его атрибутов, а затем встроить его в существующую модель документа, что приведет к автоматическому изменению вида документа в браузере.
Создание узла любого типа выполняется методами объекта document - createElement() создает узел типа
1,createTextNode() узел типа 3, createComment() узел типа 8 и createDocumentFragment() узел типа 11.
В метод createElement() передается строка, соответствующая открывающему тегу создаваемого элемента вместе с заданными атрибутами:
var newParagraph = document.createElement('<p id="par1">');
Если не надо задавать атрибуты вновь создаваемого элемента или используются их значения по умолчанию, то для создания нового элемента достаточно только его HTML-имя:
var newParagraph = document.createElement('P');
После создания, если потребуется, атрибуты становятся доступными как свойства созданного объекта: newParagraph.style.backgroundColor = 'gray';
В методы createTextNode() и createComment() передается текстовая строка, являющаяся содержимым указанных узлов, получаемое через их свойство nodeValue:
var newTextElement = document.createTextNode('xxxxx'); var newComment = document.createComment('yyyyyyyyyy');
У метода создания фрагмента документа параметров createDocumentFragment() нет: var newFragment = document.createDocumentFragment();
При создании новых объектов и встраивания их в существующую структуру документа следует формировать объекты с правильной структурой, соответствующей их представлениям в объектной модели документа. Не соблюдение этих правил может привести к неправильно сформированному документу и, в конечном итоге, к его неправильному отображению браузером.
Рассмотрим на примере таблицы HTML процесс динамического создания элемента и встраивания его в документ HTML. Любая таблица объектной модели документа обязательно состоит, по крайней мере, из двух узлов: TABLE и TBODY. Поэтому при динамическом создании таблиц не следует забывать об этом обстоятельстве:
var Table=document.createElement('TABLE'); var TBody=document.createElement('TBODY'); var Row=document.createElement('TR');
var Cell1=document.createElement('TD'); var Cell2=Cell1.cloneNode(); Row.appendChild(Cell1); Row.appendChild(Cell2); Table.appendChild(TBody); TBody.appendChild(Row); document.body.appendChild(Table);
Cell1.appendChild(document.createTextNode('Ячейка 1')); Cell2.appendChild(document.createTextNode('Ячейка 2'));
Процедура создания таблицы, собственно говоря, повторяет задание тегов в коде HTML документа (не пропуская тегов, вставляемых по умолчанию). Методом appendChild(элемент) любого узла осуществляется добавление к нему потомка - порождаемого этим объектом элемент HTML. В нашем примере этим методом в строку таблицы были добавлены две ячейки, в тело таблицы добавлена строка, а само тело было добавлено к объекту таблицы Table.
Для создания объекта, соответствующего второй ячейке таблицы использован метод cloneNode(), который создает объект - полную копию объект, для которого он вызывается, включая его атрибуты и семейство childNodes, если в качестве параметра задано значение true. Если параметр метода не задан, то используется значение по умолчаниюfalse, при котором семейство ссылок на порождаемые объекты не копируется.
Для включения вновь созданной структуры в документ ее необходимо добавить к объекту body методомappendChild(). Для манипуляции узлами используются их методы removeNode(), replaceNode() и swapNode().
Метод removeNode() удаляет объект, для которого он вызван, из структуры документа. Его единственный параметр может принимать булевы значения true или false. Значение true предписывает удалить и все порожденные данным объектом объекты, тогда как значение false (умалчиваемое) удаляет только сам объект, оставляя в документе все подчиненные ему объекты.
Замену одного объекта другим можно осуществить методом replaceNode(), вызываемым для замещаемого объекта. Замещающий объект передается в качестве параметра метода. При замене объекта замещаемый объект удаляется из структуры документа.
Поменять местами два объекта в иерархии документа позволяет метод swapNode(). Меняются местами объект, метод которого вызывается, и объект, определяемый параметром метода.
Как помним, в объектной модели DHTML, чтобы поменять местами два "равноправных" элемента, например строк таблицы, пришлось видоизменять структуру документа: удалять и добавлять ряды и ячейки. Иначе обстоит дело в объектной модели документа. Методом swapNode() можно просто поменять местами узлы-элементы в структуре документа:
function fncInterchange(row){ row.swapNode(row.previousSibling);
}
Параметром этого метода является элемент, с которым необходимо поменять местами текущий элемент.
Добавив в обработчик событий onclick какого-либо ряда таблицы вызов функции fncInterchange(), можно простым щелчком на соответствующей строке таблицы переместить ее на одну строку выше.
В приводимых ниже таблицах собраны все методы и свойства объектной модели DOM для динамической работы с документом HTML.
Методы и свойства объекта document
Метод/свойство |
Параметры |
|
Возвращаемое |
|||
|
||||||
|
значение |
|||||
|
|
|
|
|
||
|
|
|
|
|
|
|
getElementById() |
Строка - значение атрибута id элемента |
|
Узел DOM |
|
||
getElementsByName() |
Строка - значение атрибута name элемента |
|
Семейство узлов DOM |
|
||
getElementsByTagName() |
Строка - наименование тега элемента |
|
Семейство узлов DOM |
|
||
createElement() |
|
Строка - наименование тега элемента или открывающий тег элемента с |
Узел DOM |
|
||
|
атрибутами |
|
|
|||
|
|
|
|
|
||
createTextNode() |
Строка - содержимое текстового узла |
|
Узел DOM |
|
||
createComment() |
Строка - содержимое комментария |
|
Узел DOM |
|
||
|
|
|||||
createAttribute() |
Строка - название атрибута |
|
Объект-атрибут DOM |
|
||
documentElement |
|
|
|
Объект HTML |
|
|
body |
|
|
|
|
Объект body |
|
Свойства узлов DOM |
|
|
|
|
|
|
Свойство |
Возвращаемое значение |
|
|
|
|
|
firstChild |
Первый дочерний узел |
|
|
|
|
|
lastChild |
Последний дочерний узел |
|
|
|
|
|
previousSibling |
Предыдущий ближайший узел одного уровня |
|
|
|
|
|
nextSibling |
Следующий ближайший узел одного уровня |
|
|
|
|
|
childNodes |
Семейство непосредственно порожденных узлов |
|
|
|
|
|
nodeName |
Наименование узла |
|
|
|
|
|
nodeType |
Тип узла |
|
|
|
|
|
nodeValue |
Значение узла (содержимое текстового узла, для остальных узлов null) |
|
|
|
|
|
Методы узлов DOM |
|
|
|
|
|
|
Метод |
|
Параметры |
Возвращаемое значение |
|||
|
|
|
|
|||
appendChild() |
|
Новый дочерний узел |
|
Добавленный узел |
|
|
cloneNode() |
|
Истина - клонировать и дочерние узлы, ложь - клонировать |
|
Новый (клонированный) узел |
|
|
|
без дочерних |
|
|
|||
|
|
|
|
|
|
|
insertBefore() |
|
Новый дочерний узел; необязательный параметр - дочерний |
|
Новый узел |
|
|
|
узел, перед которым требуется вставить новый |
|
|
|
||
|
|
|
|
|
|
|
replaceChild() |
|
Новый дочерний узел и подлежащий замене дочерний узел |
|
Замещенный узел |
|
|
replaceNode() |
|
Новый узел для замены существующего |
|
Замещенный узел |
|
|
removeChild() |
|
Дочерний узел, подлежащий удалению |
|
Удаленный узел |
|
|
removeNode() |
|
Истина - удалить и дочерние элементы, ложь - дочерние |
|
Удаленный узел |
|
|
|
|
|
||||
|
оставить |
|
|
|||
|
|
|
|
|
|
|
swapNode() |
|
Узел, с которым исходный меняется местами |
|
Узел, с которым осуществлялась |
|
|
|
|
замены |
|
|
||
|
|
|
|
|
|
|
hasChildNodes() |
Имеет ли узел дочерние - параметров нет |
|
Истина, если да, ложь - в противном |
|
||
|
случае |
|
|
|||
|
|
|
|
|
|
|
getAttributeNode() |
Строка - название атрибута элемента |
|
Атрибут в виде |
|
||
|
объектаIHTMLDOMAttribute |
|
||||
|
|
|
|
|
||
setAttributeNode() |
Узел-атрибут |
|
Атрибут в виде |
|
||
|
объектаIHTMLDOMAttribute |
|
||||
|
|
|
|
|
||
getElementsByTagName() |
Строка - наименование тега элемента |
|
Семейство узлов DOM |
|
||
В заключение отметим, что реализация DOM в IE 5.0 не устранила существовавшую, начиная с IE 4.0, объектную модель DHTML. Просто для объектов были добавлены свойства, методы и семейства объектной модели DOM. Так что можно работать с любой из двух моделей и даже "смешивать" их, например, создав элемент в модели DOM, а изменять его содержимое свойствами innerHTML и innerText объектной модели DHTML.
DOM - ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА
Объектная модель документа (Document Object Model – DOM) является стандартом, предложенным веб-консорциумом, и регламентирует способ представления содержимого документа (в частности веб-страницы) в виде набора объектов. Под содержимым понимается все, что может находиться на веб-странице: рисунки, ссылки, абзацы, текст и т. д.
Вотличие от объектной модели браузера (BOM), которая уникальна для каждого браузера, объектная модель документа является стандартом и должна поддерживаться всеми браузерами. И хотя на практике поддержка DOM реализована не в полной мере, тем не менее необходимо стремиться следовать требованиям этого стандарта как производителям браузеров, так и разработчикам веб-сайтов.
Следует заметить, что DOM может применяться не только в веб-страницах, но и к любым других документам. В частности, она может использоваться с любыми словарями XML, причем одним из таких словарей является HTML, а
точнее, XHTML.
DOM является развивающимся стандартом и разбит на три уровня. Первый уровень является первой версией стандарта и пока что единственной законченной. Он состоит из двух разделов: первый является ядром и определяет принципы манипуляции со структурой документа (генерация и навигация), а второй посвящен представлению в DOM элементов HTML, определяемых одноименными тегами.
Второй и третий уровни описывают модель событий, дополняют таблицы стилей, проходы по структуре. Представление документа в виде древовидной структуры
ВDOM документ представляется в виде древовидной структуры (рис. 19), являющейся одной из наиболее употребительных структур в программировании. Это обеспечивает унифицированный способ навигации по документу.
Рис. 19. Представление HTML-документа в виде древовидной структуры
Навигация по документу
В модели DOM к элементу можно обратиться непосредственно по его идентификатору id, воспользовавшись методом getElementById объекта Document:
<html>
<head>
<title>Основы DOM</title> </head>
<body>
<h1 id = "head">Основы DOM</h1> <p>A Text</p>
<script language = "JavaScript">
var a = document.getElementById("head"); alert(a);
</script>
</body>
</html>
Для получения коллекции всех элементов, соответствующих какому-либо тегу, используется метод объекта Document – getElementsByTagName. Например, var a = document.getElementsByTagName("TD") присвоит переменной a коллекцию всех элементов <td>. Обратите внимание, что имя элемента следует писать прописными буквами ("TD"). Рассмотрим пример использования метода getElementsByTagName:
<html>
<head>
<title>Основы DOM</title>
</head>
<body>
<h1 id = "head">Основы DOM</h1>
<table border = "2"> <tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
<script language = "JavaScript">
var a = document.getElementsByTagName("TD"); a.item(0).style.color = "red"; a.item(3).style.fontFamily = "arial"; a.item(3).style.color = "green";
</script>
</body>
</html>
Чтобы воспользоваться преимуществом древовидной структуры, принятой в DOM для представления документа, следует использовать навигационные атрибуты (рис. 20), представленные в табл. 11.
Рис. 20. Навигационные атрибуты объекта Node
Таблица 11
Навигационные атрибуты объекта Node
Атрибут |
Описание |
|
|
firstChild |
Возвращает первый узел-потомок |
|
|
lastChild |
Возвращает последний узел-потомок |
|
|
previousSibling |
Возвращает предыдущий соседний узел, имеющий с текущим одного родителя |
|
|
nextSibling |
Возвращает следующий соседний узел, имеющий с текущим одного родителя |
|
|
parentNode |
Возвращает родительский узел |
|
|
ownerDocument |
Возвращает корневой узел документа, содержащий текущей узел |
|
|
nodeName |
Возвращает имя узла |
|
|
nodeValue |
Возвращает значение узла в текстовом формате |
|
|
nodeType |
Возвращает тип узла в виде числа |
|
|
В следующем примере осуществляется проход по древовидной структуре документа:
<html>
<head>
<title>Навигация по документу</title> </head>
<body>
<h1>Изучение навигации по документу</h1> <p>Абзац 1</p>
<p>Абзац 2</p>
<script language = "JavaScript">
var temp = document.documentElement; temp = temp.firstChild; alert(temp.tagName); if(temp.nextSibling == 3)
temp = temp.nextSibling.next.Sibling; else
temp = temp.nextSibling; alert(temp.tagName); temp = temp.firstChild; alert(temp.tagName); temp.style.color = "red"; if(temp.nextSibling == 3)
temp = temp.nextSibling.nextSibling; else
temp = temp.nextSibling; alert(temp.tagName); temp.style.color = "blue"; temp = temp.parentNode; alert(temp.tagName); </script>
</body>
</html>
Динамическая генерация веб-страниц средствами DHTML на основе DOM
Иногда требуется динамически формировать веб-страницы, например, в случае создания чатов, форумов, либо динамически создаваемых веб-страниц, содержимое которых хранится в базе данных. DOM позволяет решить такую задачу.
Для создания объектов у объекта Document имеются следующие методы (табл. 12): Таблица 12
Методы объекта Document, позволяющие создавать объекты
Метод |
Описание |
|
|
createElement(имя_элемента) |
Создает новый узел элемента с указанным именем |
|
|
createTextNode(текст) |
Создает текстовый узел с указанным текстом |
|
|
createAttribute(имя_атрибута) |
Создает новый узел атрибута с указанным именем |
|
|
Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node (табл. 13): Таблица 13
Методы объекта Node, добавляющие и удаляющие элементы документа
Метод |
Описание |
|
|
|
|
appendChild(новый_узел) |
Добавляет объект Node в конец списка узлов-потомков |
|
|
|
|
|
Создает объект Node, идентичный указанному в |
|
cloneNode(потомок-опция) |
аргументе. В качестве аргумента можно использовать и |
|
|
все узлы-потомки одновременно |
|
|
|
|
hasChildNodes() |
Возвращает true, если узел имеет потомков |
|
|
|
|
insertBefore(новый_узел, текущий_узел) |
Вставляет объект Node в список потомков перед узлом, |
|
указанным в качестве второго параметра |
||
|
||
|
|
|
removeChild(узел-потомок) |
Удаляет узел-потомок, указанный в качестве параметра |
|
|
|
|
replaceChild(новый_потомок, старый_потомок) |
Заменяет старого потомка на нового |
|
|
|
Приведем пример динамической генерации документа средствами DOM (рис. 21).