Статья из раздела: «Разработка сайтов»

Модель DOM

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

Модель DOM, объектная модель html-докумета. DOM является распространенным средством представления XML-документов. Поскольку используемый при разработке сайтов язык HTML есть подмножество XML, изучение DOM-модели необходимо и здесь. Итак, страница сайта — html-страница — состоит из набора стандартных элементов:

  • фреймов
  • блоков с текстом
  • таблиц (тег table)
  • форм для ввода и отправки данных
  • полей для ввода текста
  • переключателей (теги input типа checkbox, radio)
  • кнопок, отправляющих данные формы
  • прочих html-элементов

Для разработки полнофункциональных сайтов, web-приложений, необходимо наладить взаимодействие элементов страниц сайта между собой. Сделать это можно с помощью языка программирования JavaScript. Язык JavaScript, скрипты которого, кстати, выполняются на стороне клиента, т.е. в браузере, имеет средства для обхода как всего дерева DOM-модели, так и для доступа напрямую к блоку html-страницы. Доступ к объектам DOM-модели позволит изменить значения атрибутов блока страницы, т.е. можно управлять содержимым блока, а также, используя CSS (каскадные таблицы стилей), изменять оформление блоков.

Для эффективного управления содержимым блоков html-страниц и их оформлением необходимо хорошо представлять себе иерархию объектов DOM-модели. Вверху иерархии расположен самый старший класс window. Аттрибуты и свойства этого класса относятся, как правило, ко всему окну в целом. Доступ к подчиненным классам осуществляется через dot-нотацию, т.е. через точку, как во многих объектно-ориентированных языках. Например, если страница имеет фреймовую структуру, то доступ к фреймам можно получить таким образом:

    frames window.frames;

Вот некоторые полезные ссылки из объекта window:

  • navigator
  • location
  • history
  • document

Поскольку объект 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».


Посмотрите и другие статьи раздела «Разработка сайтов»:

На главную страницу сайта
Раскрутка медицинских сайтов
У нас есть опыт и понимание особенностей продвижения медицинских сайтов. Обращайтесь.

Предложение для сайтов ресторанов
Для сайтов ресторанов предлагаем автоматизированное меню. Посетитель заказывает не просто столик, а накрытый столик с известной стоимостью.

1С:Предприятие
Помимо создания интернет-приложений и раскрутки сайтов наша компания имеет богатый опыт разработки конфигураций с нуля на платформе «1С». У нас за плечами разработки для логистических и торговых компаний, автоматизация управленческого учета для туристических компаний - туроператоров и турагентств.

©2005—2019 «Любояр», ООО

+7 (495) 211-75-24
info@luboyar.ru

8 (495) 211-75-24
с 9.00 до 18.00 мск
«Любояр» [X]
Запомнить меня
Забыли пароль?
Написать нам
[X]