Глава 4.6. Объектная модель HTML-документа

После рассмотрения базовых интерфейсов мы переходим к описанию объектной модели HTML-документов в соответствии с DOM 2 HTML. Эта модель основана на следующих интерфейсах:

  • интерфейс HTMLDocument, соответствующий HTML-документу и производный от интерфейса Document;
  • интерфейс HTMLElement, соответствующий абстрактному HTML-элементу и производный от интерфейса Element;
  • интерфейсы, соответствующие конкретным элементам языка HTML и производные от интерфейса HTMLElement;
  • вспомогательные интерфейсы HTMLDOMImplementation и HTMLCollection.

Описанные в этой главе интерфейсы не являются обязательными для реализации DOM. Если реализация их поддерживает, то рекомендуется, чтобы ее метод DOMImplementation.hasFeature возвращал true при соответствующем запросе.

4.6.1. Реализация DOM HTML: интерфейс HTMLDOMImplementation

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс HTMLDOMImplementation является производным от интерфейса DOMImplementation. Он наследует все его свойства и методы, и имеет единственный дополнительный метод createHTMLDocument, позволяющий нам создавать объекты типа HTMLDocument.

Метод createHTMLDocument

Синтаксис:  объект.createHTMLDocument(title)
Аргументы:  title — выражение типа DOMString
Результат:  новый объект HTMLDocument
Исключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод createHTMLDocument создает новый объект HTMLDocument и возвращает указатель на него. Дерево нового документа состоит из четырех элементов: HTML, HEAD, TITLE и BODY. Аргумент title содержит титул документа, который становится содержимым элемента TITLE как его сыновний узел типа Text.

4.6.2. Коллекции: интерфейс HTMLCollection

Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Интерфейс HTMLCollection обобщает интерфейс NodeList таким образом, что доступ к элементам списка узлов становится возможен как по их номеру в списке, так и по их имени. Под именем элемента здесь понимается значение его атрибута id или name. Коллекции являются живыми, т. е. любое изменение документа влечет автоматическое изменение всех связанных с ним коллекций.

Этот интерфейс имеет единственное свойство length, возвращающее количество узлов в списке, и два метода: item, возвращающий элемент списка с заданным номером (элементы списка узлов нумеруются, начиная с нуля) и namedItem, возвращающий элемент списка с заданным именем.

Свойство length

Синтаксис:  коллекция.length
Изменяемое: нет
Поддержка: Internet Explorer Cоответствует стандарту.
           Gecko Соответствует стандарту.

Свойство length возвращает количество элементов в коллекции. Допустимые индексы элементов списка лежат в диапазоне от 0 до length-1 включительно. Следующий пример выводит на экран количество элементов в дереве документа:

alert(document.getElementsByTagName("*").length); // в Gecko (стандарт)
alert(document.all.length);                       // в Internet Explorer

Метод item

Синтаксис:  коллекция.item(index)
Аргументы:  index — числовое выражение
Результат:  узел Node или null
Исключения: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод item возвращает элемент коллекции с заданным индексом в качестве результата. Если индекс выходит за пределы диапазона элементов списка, то возвращается null. Элементы коллекции нумеруются в обратном порядке прохождения дерева, т. е. от листьев к корню. Пример: оператор

alert(document.childNodes.item(0).nodeName);

выведет на экран текст HTML.

JavaScript позволяет нам записать обращение к элементу коллекции более компактно. Предыдущий оператор может выглядеть так:

alert(document.childNodes[0].nodeName);

Internet Explorer поддерживает еще одну форму обращения к элементу списка, а именно:

alert(document.childNodes(0).nodeName);

Однако, эта форма является нестандартной, и ей лучше не пользоваться.

Метод namedItem

Синтаксис:  коллекция.namedItem(name)
Аргументы:  name — выражение типа DOMString
Результат:  узел Node или null
Исключения: нет
Поддержка: Internet Explorer Реализован нестандартно.
           Gecko Соответствует стандарту.

Метод namedItem возвращает элемент коллекции с заданным именем в качестве результата. Сначала ищется элемент, у которого атрибут id равен name; в случае неудачи ищется элемент, у которого атрибут name равен name. Если и такой элемент не найден, то возвращается null. Пример:

<IMG name="img1" src="file1.gif">
...
<SCRIPT>
alert(document.images.namedItem("img1").src);
</SCRIPT>

Оператор alert выведет в Gecko на экран спецификацию файла file1.gif. Internet Explorer не поддерживает стандартный синтаксис этого метода, поэтому для него данный оператор должен выглядеть так:

alert(document.images["img1"].src);

Приведенная форма приемлема и для Gecko. Internet Explorer поддерживает еще одну форму обращения к именованному элементу списка, а именно:

alert(document.images("img1").src);

Однако, эта форма является нестандартной, и ей лучше не пользоваться.

4.6.3. HTML-документ: интерфейс HTMLDocument

Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

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

Свойства интерфейса HTMLDocument
Свойство Изменяемое Модель Описание
anchors Нет DOM 1 Коллекция закладок, определенных в документе.
applets Нет DOM 1 Коллекция аплетов, определенных в документе.
body Да DOM 1 Указатель на тело документа.
cookie Да DOM 1 Куки, ассоциированные с документом.
domain Нет DOM 1 Доменное имя сервера.
forms Нет DOM 1 Коллекция форм, определенных в документе.
images Нет DOM 1 Коллекция графических образов, определенных в документе.
links Нет DOM 1 Коллекция гиперссылок, определенных в документе.
referrer Нет DOM 1 URI документа, ссылающегося на данный.
title Да DOM 1 Титул документа.
URL Нет DOM 1 Полный URI документа.
Методы интерфейса HTMLDocument
Метод Модель Описание
close DOM 1 Завершает редактирование документа.
getElementsByName DOM 1 Возвращает коллекцию элементов, имеющих заданное имя.
open DOM 1 Открывает документ для редактирования.
write DOM 1 Записывает в документ заданную строку.
writeln DOM 1 Записывает в документ заданную строку и символ перевода строки.

Свойство anchors

Синтаксис:  документ.anchors
Изменяемое: нет
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Свойство anchors возвращает коллекцию всех закладок, определенных в документе. Под закладкой здесь понимается элемент A, имеющий атрибут name. Согласно стандарту, закладки, определенные атрибутом id, а не name, не должны включаться в эту коллекцию, однако Internet Explorer их включает. Пример:

<A name="a1"></A>
<A id="a2"></A>
<SCRIPT>
alert(document.anchors.length);
</SCRIPT>

Оператор alert выведет в Gecko число 1, а в Internet Explorer число 2.

Свойство applets

Синтаксис:  документ.applets
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство applets возвращает коллекцию всех аплетов, определенных в документе. Аплеты определяются либо элементом OBJECT, либо морально устаревшим элементом APPLET. Пример:

for (var i = 0; i < document.applets.length; i++)
  alert(document.applets[i].code);

Свойство body

Синтаксис:  документ.body
Изменяемое: да (в Internet Explorer нет)
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство body задает или возвращает указатель на тело документа, т. е. либо на элемент BODY, либо, во фреймовых документах, на элемент FRAMESET. Пример:

alert(document.body.tagName);

Свойство cookie

Синтаксис:  документ.cookie
Изменяемое: да
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство cookie задает или возвращает строку, содержащую куки данного документа. Куки — это небольшой текстовый файл, который сохраняется обозревателем на компьютере-клиенте и содержит определенную информацию о данном Веб-документе. Содержимое куки передается в виде набора пар имя=значение, разделенных точкой с запятой. Число таких пар не должно превышать 20. Следующие имена в куки имеют специальное значение:

expires=дата Задает дату и время удаления куки. Если этот параметр не задан, то куки существует до закрытия окна обозревателя (т. н. сеансовый куки). Дата должна иметь тот же формат, что и результат метода Date.toUTCString.
domain=имя_домена Задает имя домена. Это позволяет нескольким серверам, входящим в один домен, совместно пользоваться информацией из куки.
path=путь Задает путь на сервере. Это позволяет всем страницам данного домена, хранящимся в данном каталоге и его подкаталогах, совместно пользоваться информацией из куки.
secure Этот параметр означает, что информация из куки должна быть доступна только в безопасном контексте.

При чтении этого свойства всегда возвращается строка, содержащая все куки данного документа. При этом следует учитывать, что Gecko добавляет после точки с запятой пробел, а Internet Explorer нет. Поэтому обрабатывать куки следует так, как показано в следующем примере, который возвращает дату и время удаления куки (или null для сенсового куки):

function trimLeft(s) {
  while(s[0] == " ")
    s = s.substr(1);
  return s;
}
function getCookie(sName) {
  var aCookie = document.cookie.split(";");
  for (var i = 0; i < aCookie.length; i++) {
    var aCrumb = trimLeft(aCookie[i]).split("=");
    if (sName == aCrumb[0]) 
      return unescape(aCrumb[1]);
  }
  return null;
}
alert(getCookie("expires"));

Свойство domain

Синтаксис:  документ.domain
Изменяемое: нет (в Internet Explorer да)
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство domain возвращает строку, содержащую доменное имя сервера, с которого загружена данная страница, или null, если сервер не может быть идентифицирован. Пример:

alert(document.domain);

Примечание. В Internet Explorer значение этого свойства можно изменять, присвоив ему суффикс доменного имени сервера. Дело в том, что доступ из одного фрейма MSIE к объектной модели другого допускается только в тех случаях, когда эти фреймы загружены из одного доменного имени. Пусть, например, один фрейм был загружен с сервера lib.suncloud.ru, а второй — с сервера home.suncloud.ru. Эти два фрейма не смогут общаться друг с другом; для разрешения доступа таких фреймов друг к другу мы должны присвоить их document.domain строку "suncoud.ru".

Свойство forms

Синтаксис:  документ.forms
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство forms возвращает коллекцию всех форм, определенных в документе, т. е. всех элементов FORM. Пример:

alert(document.forms.length);

Свойство images

Синтаксис:  документ.images
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство images возвращает коллекцию всех графических образов, определенных в документе, т. е. всех элементов IMG. Пример:

alert(document.images.length);

Свойство links

Синтаксис:  документ.links
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство links возвращает коллекцию всех гиперссылок, определенных в документе. Гиперссылки определяются либо элементом A, имеющим атрибут href, либо элементом AREA, имеющим атрибут href. Пример:

for (var i = 0; i < document.links.length; i++)
  alert(document.links[i].href);

Свойство referrer

Синтаксис:  документ.referrer
Изменяемое: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство referrer возвращает строку, содержащую имя документа, из которого по гиперссылке был загружен данный документ. Если такого документа нет (например, когда имя документа было введено в поле адреса обозревателя), то возвращается пустая строка. Пример:

alert(document.referrer);

Свойство title

Синтаксис:  документ.title
Изменяемое: да
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство title возвращает или задает строку, содержащую титул данного документа, т. е. содержимое его элемента TITLE. Пример:

if (document.title == "")
  document.title = "Без заголовка";

Свойство URL

Синтаксис:  документ.URL
Изменяемое: нет (в обозревателях да)
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство URL возвращает строку, содержащую полный URI данного документа. Например, для страницы, которую вы сейчас читаете, оператор alert(document.URL) выведет на экран строку http://wdh.suncloud.ru/dhtml06.htm.

Хотя стандарт считает это свойство неизменяемым, оба обозревателя позволяют задавать его значение. При этом Gecko просто игнорирует такой оператор присваивания, а Internet Explorer загружает в текущее окно документ с новым URL. Ср. описание объекта window.location в Gecko и Internet Explorer.

Метод close

Синтаксис:  документ.close()
Результат:  нет
Исключения: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод close закрывает документ, открытый методом open, и вызывает отображение этого документа. См. пример и комментарии в описании метода open.

Метод getElementsByName

Синтаксис:  документ.getElementsByName(elementName)
Аргументы:  elementName — выражение типа DOMString
Результат:  объект типа HTMLCollection
Исключения: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод getElementsByName возвращает коллекцию, состоящую из всех элементов, имеющих значение атрибута name, равное elementName. Если таких элементов нет, то возвращается пустая коллекция. В результирующую коллекцию включаются только те элементы, наличие у которых атрибута name допускается стандартом HTML. Пример:

var imgList = document.getElementsByName("MyImage");
alert(imgList.length);

Метод open

Синтаксис:  документ.open()
Результат:  нет
Исключения: нет
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Метод open открывает документ для редактирования методами write и writeln. Методы open, write, writeln и close введены в DOM HTML для совместимости со старыми версиями Netscape Navigator, который требовал специальных процедур открытия и закрытия слоя перед изменением его содержания. Современные обозреватели в этом не нуждаются, и, по всей вероятности, из следующих версий DOM перечисленные методы будут исключены.

Поэтому Gecko поддерживает методы open и close, но попросту их игнорирует. Internet Explorer точно так же игнорирует метод close, а метод open имеет два варианта: без параметров он игнорируется, а с параметрами он является синонимом метода window.open. Пример:

document.open();
document.writeln("<P>Новый абзац 1.</P><P>Новый абзац 2.</P>");
document.close();

Метод write

Синтаксис:  документ.write(text)
Аргументы:  text — выражение типа DOMString
Результат:  нет
Исключения: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод write вставляет в текущую позицию документа HTML-текст, заданный аргументом text. См. пример и комментарии в описании метода open.

Метод writeln

Синтаксис:  документ.writeln(text)
Аргументы:  text — выражение типа DOMString
Результат:  нет
Исключения: нет
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Метод writeln вставляет в текущую позицию документа HTML-текст, заданный аргументом text. К HTML-тексту добавляется символ перевода строки. См. пример и комментарии в описании метода open.

4.6.4. HTML-элемент: интерфейс HTMLElement

Интерфейс HTMLElement соответствует HTML-элементу общего вида. Он наследует все свойства и методы интерфейса Element и, кроме того, содержит несколько дополнительных свойств, соответствующих общим атрибутам элементов HTML. Атрибут style подробно будет описан в гл. 4.10, посвященной DOM CSS. Обработчики событий описаны в гл. 4.11, посвященной DOM Events.

Элементы HTML, имеющие только общие атрибуты, реализуются данным интерфейсом. Сюда относятся следующие элементы: ABBR, ACRONYM, ADDRESS, B, BDO, BIG, CENTER, CITE, CODE, DD, DFN, DT, EM, HEAD, I, KBD, NOFRAMES, NOSCRIPT, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR. Остальные HTML-элементы имеют собственные интерфейсы, которые являются наследниками интерфейса HTMLElement.

Особо следует остановиться на формате строк, содержащих значения атрибутов. Как мы уже знаем, названия тегов HTML всегда преобразуются в прописные буквы. Для атрибутов принято другое соглашение, а именно: атрибуты типа CDATA хранятся так, как они заданы в документе, а атрибуты, принимающие значения из фиксированного списка, должны преобразовываться в строчные буквы, но первая их буква делается прописной. Например, значения свойства dir должны иметь значения "Ltr" и "Rtl". Gecko следует этому соглашению, тогда как Internet Explorer преобразует значения таких атрибутов в строчные буквы (в данном случае, "ltr" и "rtl" соответственно).

Свойства интерфейса HTMLElement
Свойство Изменяемое Модель Описание
className Да DOM 1 Атрибут class.
dir Да DOM 1 Атрибут dir.
id Да DOM 1 Атрибут id.
lang Да DOM 1 Атрибут lang.
style Да DOM 2 Атрибут style.
title Да DOM 1 Атрибут title.

Свойство className

Синтаксис:  элемент.className
Изменяемое: да
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство className задает или возвращает значение атрибута class данного элемента. Пример: следующий сценарий выведет на экран строку note.

<P id="p1" class="note">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.className);
</SCRIPT>

Свойство dir

Синтаксис:  элемент.dir
Изменяемое: да
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство dir задает или возвращает значение атрибута dir данного элемента. Пример: следующий сценарий выведет в Gecko строку Ltr, а в MSIE — строку ltr.

<P id="p1" dir="ltr">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.dir);
</SCRIPT>

Свойство id

Синтаксис:  элемент.id
Изменяемое: да
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство id задает или возвращает значение атрибута id данного элемента. Пример: следующий сценарий выведет на экран строку p1.

<P id="p1">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.id);
</SCRIPT>

Свойство lang

Синтаксис:  элемент.lang
Изменяемое: да
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство lang задает или возвращает значение атрибута lang данного элемента. Пример: следующий сценарий выведет на экран строку ru.

<P id="p1" lang="ru">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.lang);
</SCRIPT>

Свойство style

Синтаксис:  элемент.style
Изменяемое: да
Поддержка: Internet Explorer Поддержано частично.
           Gecko Поддержано частично.

Свойство style обеспечивает доступ к интерфейсу CSSStyleDeclaration, соответствующему стилям CSS данного элемента. Пример: следующий сценарий выведет на экран строку 8px.

<P id="p1" style="font-size: 8px">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.style.fontSize);
</SCRIPT>

Свойство title

Синтаксис:  элемент.title
Изменяемое: да
Поддержка: Internet Explorer Соответствует стандарту.
           Gecko Соответствует стандарту.

Свойство title задает или возвращает значение атрибута title данного элемента. Пример: следующий сценарий выведет на экран строку Прим. 1.

<P id="p1" title="Прим. 1">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.title);
</SCRIPT>