Изменение объектной модели документа Каждый узловой элемент порождается другим узловым элементом и может сам выступить родителем других узлов-элементов (за исключением узла #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);} Параметром этого метода является элемент, с которым необходимо поменять местами текущий элемент.
Добавив в обработчик событий xnclick какого-либо ряда таблицы вызов функции 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.
| Упражнение 1.
| | Разработать сценарий, отображающий логическую структуру DOM для любого документа HTML. Форму отображения логической структуры разработать самостоятельно.
|
| Упражнение 2.
| | Написать сценарий, который при загрузке для всех элементов, непосредственно порождаемых элементом body, определяет число непосредственно порождаемых каждым элементом потомков и отобразить с помощью функции alert() эту информацию.
|
| Упражнение 3.
| | Написать сценарий, который меняет местами два элемента HTML. Пользователь должен щелчком мыши указать эти два элемента.
|
Глава 2. Динамический HTML
Динамический HTML (DHTML) является дальнейшим развитием языка HTML , добавляет к классическому языку набор средств, позволяющих определять внешний вид документа и управлять слоями. У разработчиков появляются дополнительные возможности:
1. Все элементы страницы доступны для просмотра и управления;
2. Возможно детальное форматирование документов с помощью каскадных таблиц стилей.
3. Абсолютное позиционирование позволяет создавать анимационные эффекты.
4. Пользователь может управлять отображением элементов на странице;
5. Использование фильтров дает возможность добавлять на страницу мультимедийные эффекты;
6. Использование свойства Z-index позволяет создавать слои, на которых располагаются элементы страницы, управлять слоями.
7. Появилась возможность создавать динамически изменяемые страницы без необходимости изменения целой страницы.
|