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

(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.

Упражнения

1. Разработать сценарий, отображающий логическую структуру DOM для любого документа HTML. Форму отображения логической структуры разработать самостоятельно.

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

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