Модели документа DHTML и DOM
Объектные модели DHTML и DOM предоставляют прямой про- граммируемый доступ ко всем элементам HTML-документа, а со- вместно с событийной моделью подобный подход позволяет обо- зревателю Интернет обрабатывать данные о действиях пользовате- ля, выполнять встроенные сценарии и динамически менять содер- жимое документа, не перезагружая его.
Модель документа DHTML
Модель документа DHTML впервые была предложена компани- ей Microsoft в обозревателе Internet Explorer 4 на базе идеологии, используемой в Microsoft Office Basic. Рассмотрим ту её неболь- шую часть, которая реализована и в других обозревателях Интер- нет.
В DHTML введено семейство all, принадлежащее объекту doc- ument, которое представляет собой массив всех элементов доку- мента и позволяющее получить доступ к любому атрибуту любого HTML-элемента. При этом если в HTML-документе содержится текст, не размеченный тегами, то его уже никак нельзя изменить.
Доступ к элементам массива возможен четырьмя различными
способами.
document.all[2] // ссылка по номеру элемента в массиве
document.all['header'] // ссылка по имени элемента, задаваемому ат-
рибутами name и id через механизм ассоциативного массива
document.all.header // ссылка по имени элемента, задаваемому атри-
бутами name и id через объектный подход
var divs = document.all.tags(‘div’); divs[1] // ссылка через массив од-
нотипных элементов
Доступ к атрибутам HTML-элементов осуществляется через их имя. Например, доступ к атрибуту border тега
<table id="tableinfo">…</table> осуществляется следующим образом: document.all.tableinfo.border = 0;
Отдельно необходимо выделить управление атрибутом style, ко- торое хранит значение всех прямо определенных свойств каскад- ных таблиц стилей, т.е. не наследуемых для данного элемента. Дос- туп к свойствам возможен двумя способами:
(объект).style.color = ‘red’;
(объект).style['color'] = ‘rgb(255,0,0)’;
Для составных свойств, имеющих в названии дефис, применя-
ются специальный алгоритм для формирования ссылок:
1) все дефисы «-» убираются из названия;
2) каждое слово, шедшее после дефиса, пишут с заглавной буквы.
Например, чтобы изменить значение свойства border-left-color,
необходимо написать следующее:
объект.style.borderLeftColor = ‘#F00′;
а для получения данных из свойства text-align
объект.style.textAlign
Рассмотрим пример того, как можно скрывать и отображать от-
дельные HTML-элементы:
<html><body><script type="text/javascript">
function changeView(object) {
if (object.style.display==’none’) object.style.display=”;
else object.style.display=’none’;
}
</script>
<p>если вы наведете курсор</p>
<p onClick="changeView(document.all.ds);"
style="cursor: hand; color: blue"> на эту строку и ‘кликните’
ее, </p>
<p id=’ds’ style="display:block;">то эта строка исчезнет</p>
<p> а эта займет ее место<p>
</body></html>
Модель DHTML позволяет также полностью менять текущий HTML-элемент. Эти действия осуществляются с помощью свойств innerHTML, innerText, outerHTML и outerText.
Свойства с префиксом inner изменяют содержимое HTML- элемента. Свойства с префиксом outer переписывают HTML- элемент целиком (рис. 4.2). При этом свойства с суффиксом Text работают только с текстовым содержимым, из которого удалены внутренние теги разметки, тогда как свойства с суффиксом HTML оперируют также и с тегами.
На рис. 4.2 отмечены «области влияния» рассмотренных четы-
рех свойств элемента на его содержимое.
Рис. 4.2. Границы влияния свойств innerHTML, innerText, outerHTML и outerText
Для тега <div>, представленного на рис. 4.2, значением свойства
innerText будет строка
Самый важный текст
а для innerHTML – строка
Самый <strong>важный</strong> текст
Значение свойства outerText совпадает со значением свойства innerText, но при его изменении теряются все теги, а outerHTML хранит полное описание элемента:
<div>Самый <strong>важный</strong> текст</div>
Стоит отметить: если при изменении свойства с суффиксом Text в строке оказываются теги, то они выводятся на экран без обработ- ки их обозревателем.
В связи с тем, что модель DHTML реализована не полностью в обозревателях, отличных от Internet Explorer, необходимо пони- мать, что в ряде обозревателей вместо свойства innerText следует использовать свойство textContent. Чтобы сделать свой документ интерпретируемым, необходим следующий код:
if (typeof(object.innerText)!=’undefined’) object.innerText=’текст’;
else
object.textContent=’текст’;
Модель документа DOM
Модель документа DOM разрабатывалась на основе DHTML. Но её коренное отличие заключается в том, что существенное зна- чение приобретает дерево объектов, состоящее из узлов (node). Та- ким образом, DOM позволяет учитывать все элементы документа, в то время как DHTML может «терять» текст, который не обрамлен какими либо тегами. Более того, DOM унифицирует процесс управления тегами и, соответственно, не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реа- лизация в конкретной системе представления документов ставит в соответствие узлам реальные элементы.
Рассмотрим, как осуществляется обращение к элементам и пе-
ремещение по дереву объектов на следующем примере:
<div>
</div>
<h3>Заголовок</h3>
Текст <em>курсив</em>
<img src="img.png" alt="image">
На рис. 4.3 показано, как приведенный HTML-код преобразует- ся обозревателем Интернет к древовидной структуре. Доступ к до- черним элементам узла, назовем его, например, element, включая текстовые, осуществляется по индексу через коллекцию (массив) потомков узла childNodes:
element.childNodes[0], element.childNodes[1], …
В табл. 4.2 приведены некоторые свойства элементов, дающие дополнительные возможности по навигации по дереву объектов, а также позволяющие получать доступ к содержанию текстовых уз- лов. Данные свойства также отображены на рис. 4.3.
Некоторые свойства узлов DOM
Таблица 4.2
|
Свойство |
Возвращаемое значение |
|
element.nodeValue |
Значение узла (содержимое текстового узла, для остальных узлов null) |
|
childEl.parentNode |
Ссылка на родителя объекта childEl |
|
fatherEl.firstChild |
Доступ к первому потомку объекта fathe- rEl |
|
fatherEl.lastChild |
Доступ к последнему потомку объекта fatherEl |
|
fatherEl.previousSibling |
Предыдущий братский узел |
|
fatherEl.nextSibling |
Следующий братский узел |
Рис. 4.3. Свойства объектов
Рассмотрим основные методы модели DOM (табл. 4.3 – 4.4), в том числе дополняющие уже рассмотренные методы объекта document, которые позволяют реализовать простейшие интерак- тивные задачи в документе: добавление и удаление HTML-элементов, изменение их содержания независимо от обозре- вателя Интернет.
Таблица 4.3
Дополнительные методы и объекты объекта document
|
Метод/свойство |
Параметры |
Описание |
|
document.createElement() |
Строка, в которой указывается наиме- нование тега эле- мента или откры- вающий тег элемен- та с атрибутами |
Создание в памяти нового HTML- элемента (не визуали- зируется) |
|
document.createTextNode() |
Строка, в которую вписывается визуа- лизируемый впо- следствии текст |
Создание содержа- ния, которое может быть впоследствии добавлено к любому HTML-элементу |
|
document.body |
Нет |
Позволяет указать, что методы применя- ются только для тела HTML-документа |
Некоторые методы узлов DOM
Таблица 4.4
|
Метод |
Описание |
|
fatherEl.appendChild(childEl) |
Добавляет элемент childEl последним потомком к эле- менту fatherEl, возвращает добавленный элемент |
|
element.insertBefore(childEl, brotherEl) |
Вставляет элемент childEl как потомка указанного элемента сразу перед указанным по- томком brotherEl, возвращает true, если операция успешна, null, если нет |
|
fatherEl.replaceChild(newEl, oldEl) |
Заменяет потомка oldEl на newEl для элемента fatherEl |
|
fatherEl.removeChild(oldEl) |
Удаляет потомка oldEl для элемента fatherEl |
|
el.getAttribute ("style") |
Возвращает значение атрибу- та style элемента el |
|
el.hasAttribute ("style") |
Возвращает true, если элемент el имеет атрибут style |
|
el.setAttribute ("style", "value") |
Устанавливает атрибуту с именем style значение value |
Рассмотрим, как можно добавить в документ новый абзац (мо- дель DHTML не имеет аналогичной кроссплатформенной возмож- ности), причем неограниченное число раз:
<html><head><script type="text/javascript"> function addNodeP(){
var par = document.createElement(‘p’); // создаем абзац
// создаем перенос строки
var br = document.createElement(‘br’);
var b = document.createElement(‘strong’); // создаем выделение
// добавляем 1-й узел
par.appendChild(document.createTextNode(’1-я строка. ‘)); 99
b.appendChild(document.createTextNode(‘Полужирный текст’)); par.appendChild(b); // добавляем 2-й узел par.appendChild(br); // добавляем 3-й узел
// и 4-й узел
var scndstr = ’2-я строка. Просто текст’; par.appendChild(document.createTextNode(scndstr));
// добавляем сформированный параграф в начало документа
document.body.insertBefore(par, document.body.firstChild);
}
</script></head><body>
<input type="button" value="Добавить новый абзац" onClick="addNodeP()">
</body></html>
Рассмотрим, как в модели DOM будет выглядеть пример, опи-
сывающей, как скрывать и отображать отдельные HTML-элементы:
function changeView(object) {
if (object.getAttribute ("style")==’display:none;’) object.setAttribute ("style", "display:block;");
else object.setAttribute ("style", "display:none;");
}
Пример выглядит похоже, однако сценарий по модели DHTML намного более безопасный. Он работает и в том случае, если для элемента определено несколько стилей. Приведенный же сценарий такую возможность не учитывает и требует добавления дополни- тельных проверок и функций, выделяющих нужную часть из набо- ра стилей. Поэтому сегодня принято совмещать в одном сценарии две модели для получения наиболее безопасных сценариев.
Рассмотрим последний пример в данном разделе, подтвер- ждающий необходимость совмещения подходов разных моделей. В этом примере мы по модели DOM заменим текущий текст абзац на другой. Если посмотреть пример выше, то можно убедиться, что
в модели DHTML эта задача в целом решается одной строкой и на-
много нагляднее, чем в модели DOM:
function replaceP(objectID){
// создаем новый элемент-абзац
var par = document.createElement(‘p’);
// присваиваем ему идентификатор заменяемого абзаца
par.setAttribute ("id", objectID);
// наполняем текстом
par.appendChild(document.createTextNode(‘Новый текст’));
// ищем в дереве нужный нам объект
elem=document.getElementById(objectID);
// заменяем старый абзац на новый
elem.parentNode.replaceChild(par, elem);
}
Конечно, и в модели DOM возможна замена одной строкой, но она работает только в том случае, если у элемента всего один по- томок, который является текстовым узлом, а значит не может быть признана универсальным решением:
document.getElementById(objectID).childNodes[0].nodeValue = "Новый текст";
РАЗДЕЛ 5. СЕРВЕРНЫЕ СЦЕНАРИИ: ЯЗЫКИ SSI И PHP
Как было отмечено в разделе 1, для работы серверных сценари- ев требуется, чтобы программное обеспечение интернет-сервера поддерживало их исполнение собственными модулями или с по- мощью внешних интерпретаторов, работающих через интерфейс CGI. На рекомендуемой для использования в данном курсе плат- форме Денвер все необходимые интерпретаторы уже установлены. И здесь необходимо еще раз пояснить, что попытки загрузить файл в обозреватель Интернет его средствами или же средствами опера- ционной системы окончатся визуализацией текстов сценариев в обозревателе, так как он не умеет их интерпретировать.
Источник: Филиппов С.А. Основы современного веб-программирования: Учебное пособие. М.: НИЯУ МИФИ, 2011. – 160 с.
Похожие посты:
- ЗНАКОМСТВО С ПОИСКОВОЙ СИСТЕМОЙ GOOGLE (0)
- Что такое селекторы и как их правильно использовать (0)
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Изменение стиля горизонтальной линии (0)
- Вывод текста заглавными буквами с помощью CSS (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Как изменить способ размножения фонового изображения (0)
