Объектная модель документа

Объектная модель документа предоставляет автору прямой программный доступ к   компонентам веб-страницы. Это, в сочетании с событийной моделью, позволяет броузеру реагировать на ввод пользователем информации, выполнять "на лету" сценарии и скрипты, и отображать новые данные без загрузки дополнительных документов с сервера, что в конечном итоге приводит к разумной интерактивности документа.

Объектная модель  позволяет программировать веб-страницу. Изучая DHTML, вам не придется учить новые тэги, но теперь каждый элемент может быть запрограммирован, а это означает, что для каждого элемента можно написать скрипт, который отвечает на действия пользователя и динамически изменяет содержимое веб-страницы. Событийная модель позволяет отвечать на такие действия пользователя, как нажатие тех или иных клавиш, проведение курсора на тем или иным элементом, ввод данных в форму, причем изменение содержимого страницы не требует взаимодействия с сервером, что приводит к значительному снижению требований к каналам связи и в то же время повышает привлекательность вашего сайта.

Каждый элемент страницы - это объект со своими свойствами, методами, событями. Объектная модель сосредоточена вокруг понятия  "наборов (collections)"   элементов, некоей иерархии, в которой находится данный элемент и который в свою очередь может быть родоначальником такой иерархии. Из наборов стоит обратить внимание на важнейшие - это all и children. Динамический документ - это каскад элементов:

<HTML>
	<BODY>
		<DIV>
			<P>Some text in a 
				<B>paragraph</B>
				<IMG id=image1 src="mygif.gif">
			</P>
		</DIV>
		<IMG id=image2 src="mygif.gif">
	</BODY>
</HTML>

Элемент DIV содержит (и является родителем, или контейнером) тэгов P и IMG с ID=image1. IMG с ID=image2, однако, является потомком BODY. В то же время тэг <B> , вложенный в <P>, будет входить в набор all тэга <DIV>, но не будет принадлежать к его коллекции children, в которую входят только непосредственные потомки.

Нажатие кнопки, выделение текста, движение мыши над документом - все эти действия вызывают события, для которых автор может написать соответствующий обработчик, тем или иным образом реагирующий на эти действия пользователя. Однако встает вопрос о совместимости версий броузеров. Начиная с 4 версии IE, количество событий, на которые могут реагировать элементы, было значительно увеличено (в отличие от NN и IE более ранних версий). В этой же версии появилось такое нововведение, как перехват событий (bubbling). Перехват события происходит тогда, когда происходит событие для такого дочернего элемента, для которого это событие не предусмотрено, и в таком случае перехватывает и обрабатывает это событие родительский элемент, если для него написан обработчик. Если же и для него такое в диковину, событие перехватывается следующим в иерархии элементом, вплоть до объекта document. 

<html>
<body>
<div id=OuterDiv style="background-color: red" onmouseover="alert(window.event.srcElement.id);">
This is some text
<img id=InnerImg>
</div>
</body>
</html>

В данном примере обработчик был написан только лля DIV, но если провести мышью над картинкой, тоже появится диалоговое окно, содержащее ID картинки. Здесь DIV перехватил событие, хотя генерировал его IMG.

Всякий раз, когда происходит событие, у объекта window генерируется новое свойство, содержащее объект event, к который записываются состояние клавиатуры, координаты курсора, а самое главное, объект, вызвавший событие (window.event.srcElement)

Другой пример -здесь, Обрабатывается событие onmouseover и оnmouseout. Нововведение в IE 4 в том, что не надо писать обработчик события для каждого элемента. Здесь мы присваиваем им одинаковый класс, и с помощью метода window.event.srcElement.className получаем класс объекта. Обработкой события занимается document, которому мы назначили обработку события:
document.onmouseover = rollon;
document.onmouseout = rolloff;

Совершенно аналогично, обработку того или иного события можно назначить элементу по его ID:

<html>
<body id=Body>
<div id=OuterDiv style="width: 100px; height: 50px; background: red" 
onmouseover="over();" onmouseout="out();">
<img id=Img1>
<img id=Img2>
<img id=Img3>
</div>
<script>
function over() 
{
  var s;
  s = "onmouseover: "+window.event.srcElement.id+" from: "+
  window.event.fromElement.id+" to: "+window.event.toElement.id;
  alert(s);
}
function out() 
{
  var s;
  s = "onmouseout: "+window.event.srcElement.id+" from: "+
  window.event.fromElement.id+" to: "+window.event.toElement.id;
  alert(s);
  if (!(OuterDiv.contains(window.event.toElement))) 
  {
     alert("Out Now");
  }
}
</script>
</body>
</html>

В данном примере вводятся еще два свойства: fromElement - элемент, предшествующий событию, toElement - элемент, над которым произошло событие.

Hosted by uCoz