Модель DOM, объектная модель html-докумета. DOM является распространенным средством представления XML-документов. Поскольку используемый при разработке сайтов язык HTML есть подмножество XML, изучение DOM-модели необходимо и здесь. Итак, страница сайта — html-страница — состоит из набора стандартных элементов:
Для разработки полнофункциональных сайтов, web-приложений, необходимо наладить взаимодействие элементов страниц сайта между собой. Сделать это можно с помощью языка программирования JavaScript. Язык JavaScript, скрипты которого, кстати, выполняются на стороне клиента, т.е. в браузере, имеет средства для обхода как всего дерева DOM-модели, так и для доступа напрямую к блоку html-страницы. Доступ к объектам DOM-модели позволит изменить значения атрибутов блока страницы, т.е. можно управлять содержимым блока, а также, используя CSS (каскадные таблицы стилей), изменять оформление блоков.
Для эффективного управления содержимым блоков html-страниц и их оформлением необходимо хорошо представлять себе иерархию объектов DOM-модели. Вверху иерархии расположен самый старший класс window. Аттрибуты и свойства этого класса относятся, как правило, ко всему окну в целом. Доступ к подчиненным классам осуществляется через dot-нотацию, т.е. через точку, как во многих объектно-ориентированных языках. Например, если страница имеет фреймовую структуру, то доступ к фреймам можно получить таким образом:
frames = window.frames;
Вот некоторые полезные ссылки из объекта window:
Поскольку объект window самый верхний в иерахии DOM-модели, в точечной нотации при обращении к подчиненным объектам можно не указывать window. В частности при обращении к элементам страницы можно использовать точечную нотацию, начиная сразу объекта document. Например, пускай у нас есть следующая html-страница:
<html>
<head>
<title>Demo DOMtitle>
<meta name="generator" content="Luboyar.RU">
head>
<body>
<form name="MyForm" action="" method="post">
<input name="MyField" value="5" />
form>
body>
html>
Тогда, обратиться к значению поля MyFeild формы MyForm, можно таким образом:
MyFeildValue = document.MyForm.MyField.value;
В языке программирования JavaScript существуют и другие методы выборки и обхода элементов дерева DOM-модели. Например, метод getElementsByTagName объекта document. Метод getElementsByTagName, как ясно из названия, делает выборку элементов по наименованию тега. Пример использования:
// выборка всех элементов li всех списков
var li = document.getElementsByTagName("li");
Доступ к элементу DOM-модели можно получить по ID этого элемента с помощью метода getElementById объекта document. Вот пример:
// доступ к элементу с id = "elem"
var el = document.getElementById("elem");
Дальше, полученные массивы можно обойти, используя стандартные средства JavaScript для обхода массивов:
// обход массива elems
for(var item in elems){
document.write("["+item+"] = " + elems[item] + "
");
}
Будьте внимательны, метод getElementsByTagName объекта document пишется с буквой «s», а метод getElementById объекта document пишется без буквы «s».