![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Изменение объектной модели документа⇐ ПредыдущаяСтр 32 из 32
(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.
|