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

Каждый узловой элемент порождается другим узловым элементом и может сам выступить родителем других узлов-элементов (за исключением узла #text). Объектная модель DOM предоставляет возможность в сценарии создать узел, соответствующий любому элементу HTML, задать значения его атрибутов, а затем встроить его в существующую модель документа, что приведет к автоматическому изменению вида документа в браузере.

Создание узла любого типа выполняется методами объекта document - createElement() создает узел типа 1, createTextNode() узел типа 3, createComment() узел типа 8 и createDocumentFragment() узел типа 11.

В метод createElement() передается строка, соответствующая открывающему тегу создаваемого элемента вместе с заданными атрибутами:

Если не надо задавать атрибуты вновь создаваемого элемента или используются их значения по умолчанию, то для создания нового элемента достаточно только его HTML-имя:

После создания, если потребуется, атрибуты становятся доступными как свойства созданного объекта:

В методы createTextNode() и createComment() передается текстовая строка, являющаяся содержимым указанных узлов, получаемое через их свойство nodeValue:

У метода создания фрагмента документа параметров createDocumentFragment() нет:

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

Рассмотрим на примере таблицы HTML процесс динамического создания элемента и встраивания его в документ HTML. Любая таблица объектной модели документа обязательно состоит, по крайней мере, из двух узлов: TABLE и TBODY. Поэтому при динамическом создании таблиц не следует забывать об этом обстоятельстве:

Процедура создания таблицы, собственно говоря, повторяет задание тегов в коде HTML документа (не пропуская тегов, вставляемых по умолчанию). Методом appendChild(элемент) любого узла осуществляется добавление к нему потомка - порождаемого этим объектом элемент HTML. В нашем примере этим методом в строку таблицы были добавлены две ячейки, в тело таблицы добавлена строка, а само тело было добавлено к объекту таблицы Table.

Для создания объекта, соответствующего второй ячейке таблицы использован метод cloneNode(), который создает объект - полную копию объект, для которого он вызывается, включая его атрибуты и семейство childNodes, если в качестве параметра задано значение true. Если параметр метода не задан, то используется значение по умолчанию false, при котором семейство ссылок на порождаемые объекты не копируется.

Для включения вновь созданной структуры в документ ее необходимо добавить к объекту body методом appendChild().

Для манипуляции узлами используются их методы removeNode(), replaceNode() и swapNode().

Метод removeNode() удаляет объект, для которого он вызван, из структуры документа. Его единственный параметр может принимать булевы значения true или false. Значение true предписывает удалить и все порожденные данным объектом объекты, тогда как значение false (умалчиваемое) удаляет только сам объект, оставляя в документе все подчиненные ему объекты.

Замену одного объекта другим можно осуществить методом replaceNode(), вызываемым для замещаемого объекта. Замещающий объект передается в качестве параметра метода. При замене объекта замещаемый объект удаляется из структуры документа.

Поменять местами два объекта в иерархии документа позволяет метод swapNode(). Меняются местами объект, метод которого вызывается, и объект, определяемый параметром метода.

Как помним, в объектной модели DHTML, чтобы поменять местами два "равноправных" элемента, например строк таблицы, пришлось видоизменять структуру документа: удалять и добавлять ряды и ячейки. Иначе обстоит дело в объектной модели документа. Методом swapNode() можно просто поменять местами узлы-элементы в структуре документа:

Параметром этого метода является элемент, с которым необходимо поменять местами текущий элемент.

Добавив в обработчик событий xnclick какого-либо ряда таблицы вызов функции fncInterchange(), можно простым щелчком на соответствующей строке таблицы переместить ее на одну строку выше.

В приводимых ниже таблицах собраны все методы и свойства объектной модели DOM для динамической работы с документом HTML.

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