Глава 4.6. Объектная модель HTML-документаПосле рассмотрения базовых интерфейсов мы переходим к описанию объектной модели HTML-документов в соответствии с DOM 2 HTML. Эта модель основана на следующих интерфейсах:
Описанные в этой главе интерфейсы не являются обязательными для реализации 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 Изменяемое: нет Поддержка: Cоответствует стандарту. Соответствует стандарту. Свойство 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Синтаксис: документ.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. Следующие имена в куки имеют специальное значение:
При чтении этого свойства всегда возвращается строка, содержащая все куки данного документа. При этом следует учитывать, что 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 данного документа.
Например, для страницы, которую вы сейчас читаете, оператор Хотя стандарт считает это свойство неизменяемым, оба обозревателя позволяют задавать его значение. При этом 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Синтаксис: элемент.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> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||