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

(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

Свойства узлов DOM

Методы узлов DOM

В заключение отметим, что реализация DOM в IE 5.0 не устранила существовавшую, начиная с IE 4.0, объектную модель DHTML. Просто для объектов были добавлены свойства, методы и семейства объектной модели DOM. Так что можно работать с любой из двух моделей и даже " смешивать" их, например, создав элемент в модели DOM, а изменять его содержимое свойствами innerHTML и innerText объектной модели DHTML.