конспект курса Java Script. Программирование клиентской части Интернет приложений с использованием JavaScript
 Скачать 1.49 Mb.
|
|
можно единственным способом — использовать свойство documentElement объекта document. После чего, используя приведенные выше свойства узлов DOM, переместиться к требуемому элементу HTML и его содержимому. Изменение объектной модели документа (Cемейства HTMLCollection в HTML DOM автоматически изменяются при изменении структуры документа!) Каждый узловой элемент порождается другим узловым элементом и может сам выступить родителем других узлов-элементов (за исключением узла #text). Объектная модель DOM предоставляет возможность в сценарии создать узел, соответствующий любому элементу HTML, задать значения его атрибутов, а затем встроить его в существующую модель документа, что приведет к автоматическому изменению вида документа в браузере. Создание узла любого типа выполняется методами объекта document — createElement() создает узел типа 1, createTextNode() узел типа 3, createComment() узел типа 8 и createDocumentFragment() узел типа 11. В метод createElement() передается строка, соответствующая открывающему тегу создаваемого элемента вместе с заданными атрибутами: var newParagraph = document.createElement(' '); Если не надо задавать атрибуты вновь создаваемого элемента или используются их значения по умолчанию, то для создания нового элемента достаточно только его HTML-имя: var newParagraph = document.createElement('P'); 117 После создания, если потребуется, атрибуты становятся доступными как свойства созданного объекта: 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(), который создает объект — полную копию объект, для 118 которого он вызывается, включая его атрибуты и семейство 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 Метод/свойство Параметры Возвращаемое значение getElementById() Строка – значение атрибута id элемента Узел DOM 119 getElementsByName() Строка – значение атрибута name элемента Семейство узлов DOM getElementsByTagName() Строка – наименование тега элемента Семейство узлов DOM createElement() Строка – наименование тега элемента или открывающий тег элемента с атрибутами Узел DOM createTextNode() Строка – содержимое текстового узла Узел DOM createComment() Строка – содержимое комментария Узел DOM createAttribute() Строка – название атрибута Объект-атрибут DOM documentElement Объект HTML body Объект body Свойства узлов DOM Свойство Возвращаемое значение parentNode Узел, порождающий данный (его родитель) firstChild Первый дочерний узел lastChild Последний дочерний узел previousSibling Предыдущий ближайший узел одного уровня nextSibling Следующий ближайший узел одного уровня childNodes Семейство непосредственно порожденных узлов nodeName Наименование узла nodeType Тип узла nodeValue Значение узла (содержимое текстового узла, для остальных узлов null) Методы узлов DOM Метод Параметры Возвращаемое значение appendChild() Новый дочерний узел (только если уже есть дочерние узлы работает) Добавленный узел cloneNode() Истина – клонировать и Новый (клонированный) узел 120 дочерние узлы, ложь – клонировать без дочерних insertBefore() Новый дочерний узел; необязательный параметр — дочерний узел, перед которым требуется вставить новый Новый узел replaceChild() Новый дочерний узел и подлежащий замене дочерний узел Замещенный узел replaceNode() Новый узел для замены существующего Замещенный узел removeChild() Дочерний узел, подлежащий удалению Удаленный узел removeNode() Истина – удалить и дочерние элементы, ложь – дочерние оставить Удаленный узел swapNode() Узел, с которым исходный меняется местами Узел, с которым осуществлялась замены hasChildNodes() Имеет ли узел дочерние – параметров нет Истина, если да, ложь – в противном случае getAttributeNode() Строка – название атрибута элемента Атрибут в виде объекта IHTMLDOMAttribute setAttributeNode() Узел-атрибут Атрибут в виде объекта IHTMLDOMAttribute getElementsByTagName() Строка – наименование тега элемента Семейство узлов DOM В заключение отметим, что реализация DOM в IE 5.0 не устранила существовавшую, начиная с IE 4.0, объектную модель DHTML. Просто для объектов были добавлены свойства, методы и семейства объектной модели DOM. Так что можно работать с любой из двух моделей и даже "смешивать" их, 121 например, создав элемент в модели DOM, а изменять его содержимое свойствами innerHTML и innerText объектной модели DHTML. Упражнения 1. Разработать сценарий, отображающий логическую структуру DOM для любого документа HTML. Форму отображения логической структуры разработать самостоятельно. 2. Написать сценарий, который при загрузке для всех элементов, непосредственно порождаемых элементом body, определяет число непосредственно порождаемых каждым элементом потомков и отобразить с помощью функции alert() эту информацию. 3. Написать сценарий, который меняет местами два элемента HTML. Пользователь должен щелчком мыши указать эти два элемента. |