Изменение объектной модели документа

(Cемейства HTMLCollection в HTML DOM автоматически изменяются при изменении структуры документа!)

Каждый узловой элемент порождается другим узловым элементом и может сам выступить родителем других узлов-элементов (за исключением узла #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

Свойство	Возвращаемое значение
parentNode	Узел, порождающий данный (его родитель)
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.