Глава 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
Поддержка:Не поддерживается.
Не поддерживается.
Интерфейс HTMLDOMImplementation является производным от интерфейса DOMImplementation. Он наследует все его свойства и методы, и имеет единственный дополнительный метод createHTMLDocument, позволяющий нам создавать объекты типа HTMLDocument.
Метод createHTMLDocument
Синтаксис: объект.createHTMLDocument(title) Аргументы: title — выражение типа DOMString Результат: новый объект HTMLDocument Исключения: нет
Поддержка:
Метод createHTMLDocument создает новый объект HTMLDocument и возвращает указатель на него. Дерево нового документа состоит из четырех элементов: HTML, HEAD, TITLE и BODY. Аргумент title содержит титул документа, который становится содержимым элемента TITLE как его сыновний узел типа Text.
4.6.2. Коллекции: интерфейс HTMLCollection
Поддержка:
Интерфейс HTMLCollection обобщает интерфейс NodeList таким образом, что доступ к элементам списка узлов становится возможен как по их номеру в списке, так и по их имени. Под именем элемента здесь понимается значение его атрибута id или name. Коллекции являются живыми, т. е. любое изменение документа влечет автоматическое изменение всех связанных с ним коллекций.
Этот интерфейс имеет единственное свойство length, возвращающее количество узлов в списке, и два метода: item, возвращающий элемент списка с заданным номером (элементы списка узлов нумеруются, начиная с нуля) и namedItem, возвращающий элемент списка с заданным именем.
Свойство length
Синтаксис: коллекция.length Изменяемое: нет
Поддержка:
Свойство length возвращает количество элементов в коллекции. Допустимые индексы элементов списка лежат в диапазоне от 0 до length-1 включительно. Следующий пример выводит на экран количество элементов в дереве документа:
alert(document.getElementsByTagName("*").length); // в Gecko (стандарт)
alert(document.all.length); // в Internet Explorer
Метод item
Синтаксис: коллекция.item(index) Аргументы: index — числовое выражение Результат: узел Node или null Исключения: нет
Поддержка:
Метод 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 Исключения: нет
Поддержка:
Метод 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
Поддержка:
Интерфейс HTMLDocument является корнем в иерархии HTML-элементов. Он наследует все свойства и методы интерфейса Document и, кроме того, содержит несколько дополнительных свойств и методов, призванных облегчить написание сценариев для управления динамическими страницами.
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| 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 документа. |
| Метод | Модель | Описание |
|---|---|---|
| close | DOM 1 | Завершает редактирование документа. |
| getElementsByName | DOM 1 | Возвращает коллекцию элементов, имеющих заданное имя. |
| open | DOM 1 | Открывает документ для редактирования. |
| write | DOM 1 | Записывает в документ заданную строку. |
| writeln | DOM 1 | Записывает в документ заданную строку и символ перевода строки. |
Свойство anchors
Синтаксис: документ.anchors Изменяемое: нет
Поддержка:
Свойство 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 Изменяемое: нет
Поддержка:
Свойство applets возвращает коллекцию всех аплетов, определенных в документе. Аплеты определяются либо элементом OBJECT, либо морально устаревшим элементом APPLET. Пример:
for (var i = 0; i < document.applets.length; i++) alert(document.applets[i].code);
Свойство body
Синтаксис: документ.body Изменяемое: да (в Internet Explorer нет)
Поддержка:
Свойство body задает или возвращает указатель на тело документа, т. е. либо на элемент BODY, либо, во фреймовых документах, на элемент FRAMESET. Пример:
alert(document.body.tagName);
Свойство cookie
Синтаксис: документ.cookie Изменяемое: да
Поддержка:
Свойство 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 да)
Поддержка:
Свойство domain возвращает строку, содержащую доменное имя сервера, с которого загружена данная страница, или null, если сервер не может быть идентифицирован. Пример:
alert(document.domain);
Примечание. В Internet Explorer значение этого свойства можно изменять, присвоив ему суффикс доменного имени сервера. Дело в том, что доступ из одного фрейма MSIE к объектной модели другого допускается только в тех случаях, когда эти фреймы загружены из одного доменного имени. Пусть, например, один фрейм был загружен с сервера lib.suncloud.ru, а второй — с сервера home.suncloud.ru. Эти два фрейма не смогут общаться друг с другом; для разрешения доступа таких фреймов друг к другу мы должны присвоить их document.domain строку "suncoud.ru".
Свойство forms
Синтаксис: документ.forms Изменяемое: нет
Поддержка:
Свойство forms возвращает коллекцию всех форм, определенных в документе, т. е. всех элементов FORM. Пример:
alert(document.forms.length);
Свойство images
Синтаксис: документ.images Изменяемое: нет
Поддержка:
Свойство images возвращает коллекцию всех графических образов, определенных в документе, т. е. всех элементов IMG. Пример:
alert(document.images.length);
Свойство links
Синтаксис: документ.links Изменяемое: нет
Поддержка:
Свойство links возвращает коллекцию всех гиперссылок, определенных в документе. Гиперссылки определяются либо элементом A, имеющим атрибут href, либо элементом AREA, имеющим атрибут href. Пример:
for (var i = 0; i < document.links.length; i++) alert(document.links[i].href);
Свойство referrer
Синтаксис: документ.referrer Изменяемое: нет
Поддержка:
Свойство referrer возвращает строку, содержащую имя документа, из которого по гиперссылке был загружен данный документ. Если такого документа нет (например, когда имя документа было введено в поле адреса обозревателя), то возвращается пустая строка. Пример:
alert(document.referrer);
Свойство title
Синтаксис: документ.title Изменяемое: да
Поддержка:
Свойство title возвращает или задает строку, содержащую титул данного документа, т. е. содержимое его элемента TITLE. Пример:
if (document.title == "") document.title = "Без заголовка";
Свойство URL
Синтаксис: документ.URL Изменяемое: нет (в обозревателях да)
Поддержка:
Свойство URL возвращает строку, содержащую полный URI данного документа.
Например, для страницы, которую вы сейчас читаете, оператор alert(document.URL) выведет на экран
строку http://wdh.suncloud.ru/dhtml06.htm.
Хотя стандарт считает это свойство неизменяемым, оба обозревателя позволяют задавать его значение. При этом Gecko просто игнорирует такой оператор присваивания, а Internet Explorer загружает в текущее окно документ с новым URL. Ср. описание объекта window.location в Gecko и Internet Explorer.
Метод close
Синтаксис: документ.close() Результат: нет Исключения: нет
Поддержка:
Метод close закрывает документ, открытый методом open, и вызывает отображение этого документа. См. пример и комментарии в описании метода open.
Метод getElementsByName
Синтаксис: документ.getElementsByName(elementName) Аргументы: elementName — выражение типа DOMString Результат: объект типа HTMLCollection Исключения: нет
Поддержка:
Метод getElementsByName возвращает коллекцию, состоящую из всех элементов, имеющих значение атрибута name, равное elementName. Если таких элементов нет, то возвращается пустая коллекция. В результирующую коллекцию включаются только те элементы, наличие у которых атрибута name допускается стандартом HTML. Пример:
var imgList = document.getElementsByName("MyImage");
alert(imgList.length);
Метод open
Синтаксис: документ.open() Результат: нет Исключения: нет
Поддержка:
Метод 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 Результат: нет Исключения: нет
Поддержка:
Метод write вставляет в текущую позицию документа HTML-текст, заданный аргументом text. См. пример и комментарии в описании метода open.
Метод writeln
Синтаксис: документ.writeln(text) Аргументы: text — выражение типа DOMString Результат: нет Исключения: нет
Поддержка:
Метод 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" соответственно).
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| 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 Изменяемое: да
Поддержка:
Свойство className задает или возвращает значение атрибута class данного элемента. Пример: следующий сценарий выведет на экран строку note.
<P id="p1" class="note">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.className);
</SCRIPT>
Свойство dir
Синтаксис: элемент.dir Изменяемое: да
Поддержка:
Свойство dir задает или возвращает значение атрибута dir данного элемента. Пример: следующий сценарий выведет в Gecko строку Ltr, а в MSIE — строку ltr.
<P id="p1" dir="ltr">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.dir);
</SCRIPT>
Свойство id
Синтаксис: элемент.id Изменяемое: да
Поддержка:
Свойство id задает или возвращает значение атрибута id данного элемента. Пример: следующий сценарий выведет на экран строку p1.
<P id="p1">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.id);
</SCRIPT>
Свойство lang
Синтаксис: элемент.lang Изменяемое: да
Поддержка:
Свойство lang задает или возвращает значение атрибута lang данного элемента. Пример: следующий сценарий выведет на экран строку ru.
<P id="p1" lang="ru">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.lang);
</SCRIPT>
Свойство style
Синтаксис: элемент.style Изменяемое: да
Поддержка:
Свойство 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 Изменяемое: да
Поддержка:
Свойство title задает или возвращает значение атрибута title данного элемента. Пример: следующий сценарий выведет на экран строку Прим. 1.
<P id="p1" title="Прим. 1">Текст примечания.</P>
<SCRIPT>
var o = document.getElementById("p1");
alert(o.title);
</SCRIPT>
