Лекция 7 Стандартная объектная модель документа

Варианты DOM DOM уровня 0 поддерживает общие коллекции объектов документа (forms [ ], images [ ], anchors [ ], links [ ] и applets [ ] ) DOM уровня 1. Обеспечивает возможность работы со всеми элементами документа посредством стандартного набора функций. DOM уровня 2. Обеспечивает более совершенные возможности доступа к эле­ментам страницы, прежде всего, связанным с XML, путем объединения моде­лей DOM уровня 0 и уровня 1 и добавления возможностей доступа к таблицам стилей для работы с ними. DOM уровня 3. Состоит из шести различных спецификаций: 1. DOM Level 3 Core; 2. DOM Level 3 Load and Save; 3. DOM Level 3 XPath; 4. DOM Level 3 Views and Formatting; 5. DOM Level 3 Requirements; 6. DOM Level 3 Validation.

Дерево: документ Проверка DOM Заголовок примера Это абзац текста для примера Yahoo!

Дерево: представление

Типы узлов DOM HTML Номер типа узла Тип ОписаниеПример 1 Элемент Элемент HTML или XML... 2 Атрибут Атрибут элемента HTML или XML align="center" 3 Текст Фрагмент текста, заключенного в элемент HTML или XML Это фрагмент текста! 8 Комментарий Комментарий HTML 9 Документ Корневой объект документа, т.е. элемент, находящийся в самом верху иерархии дерева анализа 10 Тип документа Определение типа документа

Отношения узлов в дереве Пример Это абзац текста для примера Поддерево

Пример документа Проверка DOM Заголовок примера Это абзац текста для примера Yahoo!

Доступ к элементу документа по Id Пример var elem = document.getElementById("p1"); alert("Имя узла: "+elem.nodeName+"\n Тип узла: "+elem.nodeType+"\n Значение: "+elem.nodeValue);

Свойства Node, ч. 1 Свойство объекта Node Описание nodeName Содержит имя узла nodeValue Содержит имеющееся в узле значение. Применимо, как правило, только к узлам текста nodeType Хранит числовое значение, соответствующее типу узла parentNode Ссылка на родительский узел данного объекта, если таковой существует childNodes Обеспечивает доступ к списку дочерних узлов firstChild Ссылка на первый дочерний узел данного элемента, если таковые существуют

Свойства Node, ч. 2 Свойство объекта Node Описание lastChild Ссылка на последний дочерний узел данного элемента, если таковые существуют previousSibling Ссылка на предыдущий сестринский узел данного узла (когда родительский узел имеет несколько дочерних) nextSibling Ссылка на следующий сестринский узел данного узла (когда родительский узел имеет несколько дочерних) attributes Список атрибутов данного элемента ownerDocument Указывает HTML-объект document, в котором содержится данный элемент

Пример движения по дереву, ч. 1 Заголовок примера Это абзац текста для примера Yahoo! <!-- function nodeStatus(node){ var temp = ""; temp += "Имя узла: "+node.nodeName+"\n"; temp += "Тип узла: "+node.nodeType+"\n"; temp += "Значение: "+node.nodeValue+"\n\n";

Пример движения по дереву, ч. 2 return temp; } var currentElement = document.getElementById('p1'); var msg = nodeStatus(currentElement); currentElement = currentElement.firstChild; msg += nodeStatus(currentElement); currentElement = currentElement.nextSibling; // элемент EM msg += nodeStatus(currentElement); currentElement = currentElement.firstChild; msg += nodeStatus(currentElement); currentElement = currentElement.parentNode; // элементу EM msg += nodeStatus(currentElement); currentElement = currentElement.previousSibling; //1 msg += nodeStatus(currentElement); currentElement = currentElement.parentNode; // P msg += nodeStatus(currentElement); currentElement = currentElement.lastChild; // 3 msg += nodeStatus(currentElement); alert(msg); //>

Проверка существования узлов Проверка существования дочерних узлов if (current.hasChildNodes()) current = current.firstChild; Проверка существования сестринских или родительских узлов if (current.parentNode) current = current.parentNode;

Коллекция элементов с одним именем Пример создания tagList = document.getElementsByName('myTag'); Пример использования tagList = document.getElementsByName('myTag'); for (var i = 0; i < tagList.length; i++) alert(tagList.item(i).nodeName); или: tagList = document.getElementsByName('myTag'); for (var i = 0; i < tagList.length; i++) alert(tagList[i].nodeName);

Корневые узлы дерева Пункты для начала обхода дерева: document.documentElement document.body document.doctype

Коллекции DOM 0 Коллекция Описание document.anchors[] коллекция всех анкеров на странице, определенных с помощью document.applets[] коллекция всех аплетов java на странице document.forms[] коллекция всех дескрипторов на странице document.images[] коллекция всех изображений на странице, определенных с помощью дескрип­торов document.links[] коллекция всех ссылок на странице, определенных с помощью

Обобщенные коллекции элементов Коллекция однотипных элементов в дереве документа var pd = document.getElementsByTagName("p"); var pd = document.body.getElementsByTagName("p"); Коллекция однотипных элементов в поддереве документа var elem = document.getElementById("myid"); var pd = elem.getElementsByTagName("p");

Создание узлов в DOM Метод ОписаниеПример createAttribute (имя) Создает для элемента атрибут с именем, указанным строкой имя. myAlign = document.createAttribute ("align"); createComment (строка) Создает текстовый комментарий HTML/ XML вида myComment = document.createComment ("Это комментарий"); createDocumentFr agment() Создает фрагмент документа myFragment = document.createDocument Fragment(); myFragment.appendChild (temp); createElement (тип) Создает элемент, тип которого задается значением строкового параметра тип myHeading = document.createElement ("h1"); createTextNode (строка) Создает узел текста, содержащий значение параметра строка newText = document.createTextNode ("Новый текст");

Вставка и добавление узлов в документ Пример добавления узла: current = document.getElementById('p1'); current.appendChild(newNode);

Добавление узлов (пример), ч. 1 Проверка D0M <!-- function makeNode(str) { var newParagraph = document.createElement("p"); var newText = document.createTextNode(str); newParagraph.appendChild(newText) ; return newParagraph; }

Добавление узлов (пример), ч. 2 function appendBefore(nodeld, str) { var node = document.getElementById(nodeld) ; var newNode = makeNode(str); if(node.parentNode) node.parentNode.insertBefore(newNode,node); } function insertWithin(nodeld, str) { var node = document.getElementById(nodeld); var newNode = makeNode(str); node.appendChild(newNode); } function appendAfter(nodeld, str) { var node = document.getElementById(nodeld); var newNode = makeNode(str); if (node.parentNode) if (node.nextSibling) node.parentNode.insertBefore(newNode, node.nextSibling); else node.parentNode.appendChild(newNode); }

Добавление узлов (пример), ч. 3 DOM: вставка и добавление <input type="button" value="до" onclick="appendBefore('innerDiv',document.forml.fieldl.value); " /> <input type="button" value="вовнутрь" onclick="insertWithin('innerDiv',document.forml.fieldl.value) ; " /> <input type="button" value="после" onclick="appendAfter('innerDiv',document.forml.fieldl.value);" />

Клонирование узлов, ч. 1 TODO supply a title Это проверка клонирования

Клонирование узлов, ч. 2 function clone(nodeId, deep){ var toClone = document.getElementById(nodeId); var clonedNode = toClone.cloneNode(deep); var insertPoint = document.getElementById('ins'); insertPoint.appendChild(clonedNode); } <input type="button" value="клонирование" onclick="clone('pi', false);" /> <input type="button" value="Глубокое клонирование" onclick="clone('pi', true);" />

Удаление и замена узлов, ч. 1 TODO supply a title function doDelete(){ var deletePoint = document.getElementById('toDelete'); if (deletePoint.hasChildNodes()) deletePoint.removeChild(deletePoint.lastChild); } function doReplace() { var replace = document.getElementById('toReplace'); var newNode = document.createElement("strong"); var newText = document.createTextNode("элемент 'strong'");

Удаление и замена узлов, ч. 2 newNode.appendChild(newText); replace.parentNode.replaceChild(newNode, replace); } Это абзац Это другой абзац для удаления Это еще один абзац Этот абзац содержит элeмeнт 'em'.

Методы для изменения узлов Метод Описание appendData (строка) Этот метод добавляет текст, заданный аргументом строка, в конец узла текста deleteData (смещение, число) Удаляет указанное число символов, начиная с позиции, указанной значением смещение insertData( смещение, строка) Вставляет текст, заданный аргументом строка, начиная с позиции, указанной значением смещение replaceData (смещение, число, строка) Замещает указанное число символов в узле текста соответствующими символами аргумента строка, начиная с позиции, указанной значением смещение splitText (смещение) Разделяет узел текста на две части в позиции, указанной значением смещение. Возвращает правую часть результата разделения в виде нового узла текста, левая часть остается в исходном узле substringData (смещение, число) Возвращает строку текста, содержащую указанное число символов строки содержимого текстового узла, начиная с позиции, указанной значением смещение

Изменение узлов (пример), ч. 1 TODO supply a title Это проверка var textNode = document.getElementById('pi').firstChild;

Изменение узлов (пример), ч. 2

Методы для работы с атрибутами getAttribute(имя) setAttribute (имя Атрибута, значение) removeAttribute (имя Атрибута)

Работа с атрибутами (пример), ч.1 TODO supply a title Измените мои атрибуты! theElement = document.getElementById('test'); Цвет:

Работа с атрибутами (пример), ч.2 Размер: <select onchange="theElement.setAttribute('size', this.options[this.selectedIndex].text);"> document.testform.color.value = theElement.getAttribute ('color');

Связь DOM и атрибутов дескрипторов Пример оформления параграфа: <р align="left | center | right | justify" id="уникальный идентификатор" class="имя класса" style= "правила стиля" title="текст подсказки" lang="код языка" dir="направление текста: LTR или RTL"> содержимое абзаца Соответствующие атрибуты HTMLParagraphElement: align id className title lang dir

Доступ к свойству style CSS Пример дескриптора с атрибутом style: проверка Доступ к значениям style: theElement = document.getElementById("myParagraph "); theElement.style.color = "green"; theElement.style.fontStyle= "italic" theElement.style.textDecoration= "overline"

Установка CSS-классов Пример CSS-классов.view1 {color: black; background- color: yellow; font-style: normal;}.view2 {background-color: orange; font-style: italic;} проверка Применение CSS-классов theElement = document.getElementById("myp"); theElement.className = "view2";

Другие модели DHTML Свойство innerHTML от Microsoft Это абзац текста для примера var theElement = document.getElementById("p1"); alert(theElement.innerHTML); Аналогичные свойства: innerText outerText outerHTML