Добавляем...


DOM и элементы HTML
Теперь, когда мы обсудили возможности создания элементов (X)HTML и установки их атрибутов, должно быть ясно, что тесная связь элементов разметки и программного кода JavaScript определяется именно моделью DOM. Таким образом, чтобы эффективно использовать DOM, необходимо знать синтаксис (X)HTML, поскольку многие свойства объектов являются просто проекциями атрибутов соответствующих элементов (X)HTML. Например, в HTML 4.01 для элементов абзаца используется следующий синтаксис:

<p align="left | center | right | justify"
id="'уникальный идентификатор"
class="uMH класса"
style ="правила стиля"
title="meKcm подсказки"
lang="кoд языка"
dir="направление текста: LTR или RTL"> содержимое абзаца </p>

   Модель DOM уровня 1 делает доступными в объекте HTMLParagraphElement большинство указанных атрибутов, включая align, id, className, title, lang и di r. DOM уровня 2 предлагает и доступ к атрибуту style, который будет обсуждаться в следующем разделе. Различные обработчики событий, такие как onclick и оп-mouseover, тоже достижимы (посредством механизмов, которые будут обсуждаться в следующей главе).
Интерфейс доступа к элементу HTML выводятся из базового объекта HTMLElement, определяющего id, className, title, lang и dir. При этом многие элементы HTML не поддерживают никаких других атрибутов. Такими, например, являются элементы
  • HEAD;
  • специальные: SUB, SUP, SPAN и BDO;
  • шрифта: тт, i, в, и, S, strike, big и small;
  • фразы: ЕМ, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ACRONYM И ABBR;
  • списка: DD и DT;
  • NOFRAMES иNOSCRIPT;
  • ADDRESS И CENTER.
   Остальные свойства элементов следуют синтаксису (X)HTML. Если вы хорошо знакомы с (X)HTML, вы сможете предугадать свойства DOM, соответствующие атрибутам элемента HTML, используя следующие эмпирические правила. Если атрибут имеет простое словесное обозначение (типа "align"), он будет представлен без модификаций, за исключением случаев, когда возникают конфликты с зарезервированными словами JavaScript. Например, дескриптор <label>, определенный объектом HTMLLabelElement, поддерживает атрибут for, который в таком виде, очевидно, конфликтовал бы с оператором for в JavaScript. Чтобы решить эту проблему, часто в начало слова добавляют "html", так что в DOM указанный атрибут представлен как htmlFor. В некоторых случаях этому правилу не следуют. Например, атрибутам char и charoff дескриптора <col> соответствуют ch и chOff в DOM уровня 1. К счастью, такие исключения встречаются нечасто. И, наконец, если атрибут имеет идентификатор из двух слов (например, tabindex), он изображается в DOM в стандартном для JavaScript "криволинейном" стиле — в данном случае как tabindex.

   Главные особенности отображения HTML в DOM касаются только таблиц. Из-за сложности таблиц в HTML 4.0 очень велико число методов, связанных с созданием и удалением различных элементов таблиц (таких как заголовки, строки или ячейки) и модификацией таких дескрипторов HTML 4.0, как <tfoot>, <thead> и <tbody>.

   Наконец, чтобы обеспечить согласованность с традиционным синтаксисом программирования в JavaScript, имеется целый ряд методов и свойств как элемента form непосредственно, так и различных полей формы, таких как input, select, textarea и button.

   В качестве иллюстрации того, что можно делать с помощью DOM, предлагаем следующий пример, демонстрирующий возможности создания и редактирования HTML-кода с помощью методов DOM.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Редактор DOM HTML 0.1</title>
<meta http-equiv="content-type" content="text/html; " />
<script type="text/javascript">
<!--
function addElement()
{
var choice = document.htmlForm.elementList.selectedIndex;
var theElement =
document.createElement(document.htmlForm.elementList.options[choice].text);
var textNode = document.createTextNode(document.htmlForm.elementText.value);
var insertSpot = document.getElementById('addHere');
theElement.appendChild(textNode);
insertSpot.appendChild(theElement);
}
function addEmptyElement(elementName)
{
var theBreak = document.createElement(elementName);
var insertSpot = document.getElementById('addHere');
insertSpot.appendChild(theBreak);
}
function deleteNode()
{
var deleteSpot = document.getElementById('addHere');
if (deleteSpot.hasChildNodes())
{
var toDelete = deleteSpot.lastChild;
deleteSpot.removeChild(toDelete);
}
}
function showHTML()
{
var insertSpot = document.getElementById('addHere');
if (insertSpot.innerHTML)
alert(insertSpot.innerHTML);
else
alert("Без innerHTML это представить трудно");
}
//-->
</script>
</head>
<body>
<h1 style="text-align: center">Простой редактор DOM HTML </h1>
<br /><br />
<div id="addHere" style="background-color: #ffffcc; border: solid;">
 
</div>
<br /><br />
<form id="htmlForm" name="htmlForm" action="#" method="get">
<select id="elementList" name="elementList">
<option>B</option>
<option>BIG</option>
<option>CITE</option>
<option>CODE</option>
<option>EM</option>
<option>H1</option>
<option>H2</option>
<option>H3</option>
<option>H4</option>
<option>H5</option>
<option>H6</option>
<option>I</option>
<option>P</option>
<option>U</option>
<option>SAMP</option>
<option>SMALL</option>
<option>STRIKE</option>
<option>STRONG</option>
<option>SUB</option>
<option>SUP</option>
<option>TT</option>
<option>VAR</option>
</select>
<input type="text" name="elementText" id="elementText" value="по умолчанию" />
<input type="button" value="Добавить элементt" onclick="addElement()" />
<br /><br />
<input type="button" value="Вставить <br>" onclick="addEmptyElement('BR');" />
<input type="button" value="Вставить <hr>" onclick="addEmptyElement('HR');" />
<input type="button" value="Удалить Елемент" onclick="deleteNode();" />
<input type="button" value="Показать HTML" onclick="showHTML();" />
</form>
</body>
</html>

Этот редактор, окно которого показано достаточно просто модифицировать, чтобы имелась возможность добавлять атрибуты и применять множество стилей. Мы оставим эту задачу в качестве упражнения для читателя, заинтересованного в освоении тонкостей DOM.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика