Представление html в виде дерева. WDH: DHTML - Объектная модель документа

DOM API не особенно сложен, но прежде чем переходить к обсуждению программирования с использованием DOM, следует разобраться с некоторыми вопросами архитектуры DOM.

Представление документов в виде деревьев
HTML-документы имеют иерархическую структуру, представленную в DOM в виде дерева. Узлы дерева представляют различные типы содержимого документа. В первую очередь, древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и

И узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие комментарии HTML.1 Рассмотрим следующий
простой HTML-документ.

Sample Document

This is a simple document.

Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно знать, что они заимствуют терминологию у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу.

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

Узлы
Древовидная структура DOM представляет собой дерево объектов Node различных типов. Интерфейс Node1 определяет свойства и методы для перемещения по дереву и манипуляций с ним. Свойство childNodes объекта Node возвращает список дочерних узлов, свойства firstChild, lastChild, nextSibling, previousSibling и parentNode предоставляют способ обхода узлов дерева. Такие методы, как appendChild(), removeChild(), replaceChild() и insertBefore(), позволяют добавлять узлы в дерево документа и удалять их.

Типы узлов
Типы узлов в дереве документа представлены специальными подынтерфейсами интерфейса Node. У любого объекта Node есть свойство nodeType, определяющее тип данного узла. Если свойство nodeType узла равно, например, константе Node.ELEMENT_NODE, значит, объект Node является также объектом Element, и можно использовать с ним все методы и свойства, определенные ин-терфейсом Element.

Свойство document-Element этого объекта ссылается на объект Element, представляющий корневой элемент документа. Для HTML-документов это тег, явно или неявно присутствующий в документе. (Помимо корневого элемента узел Document может иметь другие дочерние элементы, такие как объекты Comment.)

Основная часть дерева DOM состоит из объектов Element, представляющих такие теги, как и , и объектов Text, представляющих строки текста. Если анализатор документа сохраняет комментарии, эти комментарии представляются в дереве как объекты DOM Comment.

Атрибуты
Атрибуты элемента (например, атрибуты src и width тега ) могут быть прочитаны, установлены и удалены с помощью методов getAttribute(), set-Attribute() и removeAttribute() интерфейса Element.

Другой, менее удобный способ работы с атрибутами – это метод getAttribute-Node(), который возвращает объект Attr, представляющий атрибут и его значение. (Одной из причин выбора этой менее удобной технологии является наличие у интерфейса Attr свойства specified, позволяющего определять, указан ли данный атрибут в документе явно или для него принимается значение по умолчанию.) Однако обратите внимание, что объекты Attr не присутствуют в массиве childNodes элемента и непосредственно не являются частью дерева документа, как узлы Element и Text.

Спецификация DOM позволяет обращаться к узлам Attr через массив attributes интерфейса Node, но в Microsoft Internet Explorer определяется другой несовместимый массив attributes, что делает невозможным использование этого массива переносимым образом.

DOM HTML API
Стандарт DOM предназначен для работы как с XML, так и с HTML. Базовый DOM API – интерфейсы Node, Element, Document и другие – относительно универсален и применим к обоим типам документов. Стандарт DOM также включает интерфейсы, специфические для документов HTML. HTMLDocument – это специфический для HTML подынтерфейс интерфейса Document, а HTMLElement – специфический для HTML подынтерфейс интерфейса Element. Кроме того, DOM определяет интерфейсы для многих элементов HTML, относящиеся к конкретным тегам. Эти интерфейсы, такие как HTMLBodyElement и HTMLTitleElement, обычно определяют набор свойств, отражающих атрибуты данного тега HTML. Интерфейс HTMLDocument определяет различные свойства документа и методы, поддерживавшиеся броузерами до появления стандарта W3C. В их число входят свойство location, массив forms и метод write().

Интерфейс HTMLElement определяет свойства id, style, title, lang, dir и className, обеспечивающие удобный доступ к значениям атрибутов id, style,title, lang, dir и class, которые могут применяться со всеми тегами HTML.

Теги HTML не принимают никаких атрибутов, кроме шести только что перечисленных, и потому полностью представимы интерфейсом HTMLElement.

Для всех остальных тегов HTML в части спецификации DOM, относящейся
к HTML, определяются специальные интерфейсы. Для многих тегов HTML
эти интерфейсы не делают ничего, кроме предоставления набора свойств, соответствующих атрибутам HTML. Например, тегу

соответствует интерфейс HTMLU ListElement, а для тега есть соответствующий интерфейс HTMLBodyElement. Поскольку эти интерфейсы просто определяют свойства, стандартизованные в HTML, они не документируются в этой книге подробно.

Можно спокойно предположить, что объект HTMLElement, представляющий определенный тег HTML, имеет свойства для каждого из стандартных атрибутов этого тега (см. соглашения о назначении имен в следующем разделе). Обратите внимание, что стандарт DOM определяет свойства для атрибутов HTML для удобства создателей сценариев. Общий (и, пожалуй, предпочтительный) способ чтения и установки значений атрибутов предоставляют методы getAttribute() и setAttribute() объекта Element. Некоторые из интерфейсов, описанных в HTML DOM, определяют дополнительные свойства или методы, отличные от тех, что соответствуют значениям атрибутов HTML. Например, интерфейс HTMLInputElement определяет методы focus() и blur(), а интерфейс HTMLFormElement – методы submit() и reset() и свойство length. Такие методы и свойства обычно присутствовали до стандартизации DOM и были сделаны частью стандарта для обратной совместимости с принятой практикой программирования. Подобные интерфейсы документированы в «Справочнике по W3C DOM» (часть V). Кроме того, информацию о частях этих интерфейсов, относящихся к «принятой практике», можно найти в части IV «Справочник по клиентскому JavaScript», хотя зачастую эта информация приведена под именем, использовавшимся до стандартизации DOM, – так, HTMLFormElement и HTMLInputElement в «Справочнике по клиентскому JavaScript» описаны в разделах «Form» и «Input».

Соглашения о назначении имен для HTML
При работе со специфическими для HTML частями стандарта DOM необхомимо иметь в виду некоторые простые соглашения о назначении имен. Имена свойств, специфических для интерфейсов HTML, начинаются со строчных букв. Если имя свойства состоит из нескольких слов, первые буквы второго и последующих слов являются прописными. Таким образом, атрибут maxlength тега транслируется в свойство maxLength интерфейса HTMLInputElement.

Когда имя атрибута HTML конфликтует с ключевым словом JavaScript, для разрешения конфликта к имени добавляется префикс «html». Например, атрибут for тега транслируется в свойство htmlFor интерфейса HTMLLabelElement. Исключение из этого правила составляет атрибут class (кото-рый может быть указан для любого элемента HTML) – он транслируется в свойство className1 интерфейса HTMLElement.

Уровни и возможности DOM
Имеются две версии, или два «уровня», стандарта DOM. DOM Level 1 был стандартизован в октябре 1998 года. Он определяет базовые интерфейсы DOM, такие как Node, Element, Attr и Document, а также различные интерфейсы, специфические для HTML. DOM Level 2 был стандартизован в ноябре 2000 года.2 Кроме некоторых изменений в базовых интерфейсах, эта версия DOM была сильно расширена за счет определения стандартных API для работы с событиями документа и каскадными таблицами стилей (CSS), а также с целью предоставления дополнительных инструментальных средств для работы с непрерывными областями документов. На момент написания этой книги рабочая группа DOM в W3C занимается стандартизацией DOM Level 3. Кроме того, иногда вы можете встретить упоминание о DOM Level 0. Этот термин не относится к какому-либо формальному стандарту, а служит для неформальной ссылки на общие средства объектных моделей документа, реализованных в Netscape и Internet Explorer до стандартизации консорциумом W3C. В DOM Level 2 стандарт стал модульным. Базовый модуль, определяющий основную древовидную структуру документа с помощью (среди прочих) интерфейсов Document, Node, Element и Next, – это единственный модуль, являющийся обязательным. Все остальные модули не обязательны и могут либо поддерживаться, либо нет, в зависимости от реализации. Реализация DOM в веб-броузере, очевидно, должна поддерживать модуль HTML, так как веб-документы пишутся на HTML. Броузеры, поддерживающие таблицы стилей CSS, обычно поддерживают модули StyleSheets и CSS, поскольку стили CSS играют ключевую роль в программировании Dynamic HTML. Аналогично, так как большинство интересных программ JavaScript требует наличия средств обработки событий, можно предполагать поддержку веб-броузерами модуля Events спецификации DOM.

К сожалению, модуль Events был лишь недавно определен спецификацией DOM Level 2 и не имел широкой поддержки на момент написания этой книги.

Соответствие DOM
На момент написания этой книги не существовало броузера, полностью соответствующего стандарту DOM. Последние релизы Mozilla ближе всего по-дошли к этому, и полная совместимость с DOM Level 2 является целью проекта Mozilla. Броузер Netscape 6.1 соответствует большинству важных модулей Level 2, а Netscape 6.0 отличает достаточно хорошая совместимость, но с некоторым пробелами. Internrt Explorer 6 в основном совместим (по крайней мере, за одним неприятным исключением) c DOM Level 1, но не поддерживает многие модули Level 2, в частности, модуль Events. Internet Explorer 5 и 5.5 имеют значительные пробелы в совместимости, но достаточно хорошо поддерживают ключевые методы DOM Level 1, чтобы запускать большинство примеров из этой главы. В версии IE для Macintosh реализована значительно более полная поддержка DOM, чем в IE 5 для Windows. Кроме Mozilla, Netscape, Internet Explorer и несколько других броузеров предлагают как минимум частичную поддержку DOM. Количество доступных броузеров стало слишком велико, а изменения в сфере поддержки стандартов происходят слишком быстро, чтобы даже пытаться в этой книге определенно утверждать, какие средства DOM поддерживает конкретный броузер. Следовательно, при определении совместимости реализации DOM в любом конкретном броузере вам придется полагаться на другие источники информации. Одним из источников информации о совместимости является сама реализация. В совместимой реализации свойство implementation объекта Document ссылается на объект DOMImplementation, определяющий метод под названием hasFeature(). Посредством этого метода (если он существует) можно получить сведения о наличии поддержки определенного модуля (или возможностей) стандарта DOM. Например, определить, поддерживает ли реализация DOM в веб-броузере базовые интерфейсы DOM Level 1 для работы с документами HTML, можно с помощью следующего кода:

If (document.implementation &&
document.implementation.hasFeature &&
document.implementation.hasFeature("html", "1.0")) {
// Броузер заявляет о поддержке базовых интерфейсов Level 1
// и интерфейсов HTML
}

Метод hasFeature() принимает два аргумента: первый – это имя проверяемого модуля, а второй – номер версии в виде строки. Он возвращает true, если указанная версия указанного модуля поддерживается.

Например, если hasFeature() указывает, что поддерживается модуль MouseEvents, это подразумевает, что также поддерживается модуль UIEvents, который, в свою очередь, подразумевает поддержку модулей Events, Views и Core.В Internet Explorer 6 (под Windows) hasFeature() возвращает true только для модуля «HTML» и версии «1.0». Он не сообщает о совместимости с любыми другими модулями

В Netscape 6.1 hasFeature() возвращает true для большинства имен модулей и номеров версий, за исключением модулей Traversal и Mutation-Events. Метод возвращает false для модулей Core и CSS2 версии 2.0, указывая на неполную совместимость (даже несмотря на то, что поддержка этих модулей очень хороша).

В этой книге документируются интерфейсы, составляющие все модули DOM. Модули Core, HTML, Traversal и Range рассматриваются в этой главе. Модули StyleSheets, CSS и CSS2 рассматриваются в главе 18, а различные модули, относящиеся к событиям (за исключением MutationEvents) – в главе 19. Часть V «Справочник по W3C DOM» содержит полное описание всех модулей.

Метод hasFeature() не абсолютно надежен. Как отмечалось выше, IE 6 сообщает о совместимости Level 1 со средствами HTML, даже несмотря на то, что в этой совместимости есть некоторые проблемы. С другой стороны, Netscape 6.1 сообщает о несовместимости с Level 2 Core, даже несмотря на то, что этот броузер почти совместим с этим модулем. В обоих случаях нужны более подробные сведения о том, что именно совместимо, а что нет. Но объем этой ин-формации слишком велик, и она слишком изменчива, чтобы включать ее в печатное издание.

Те, кто активно занимается веб-разработкой, несомненно, уже знают или скоро узнают о многих специфических для броузеров деталях совместимости. Кроме того, в Интернете есть ресурсы, которые могут оказаться полезными. Самое важное, что организация W3C (в сотрудничестве с Национальным институтом стандартов и технологии США) работает над созданием набора с открытыми исходными текстами для тестирования реализаций DOM. На
момент написания этой книги разработка тестового набора только начиналась, но он должен стать неоценимым средством тонкой проверки на совместимость реализации DOM. Подробности можно найти на сайте http://www.w3c.org/DOM/Test/.

Организация Mozilla имеет несколько тестовых наборов для различных стандартов, в том числе для DOM Level 1 (доступных на странице http://www.mozilla.org/qualitybrowser_sc.html). Компания Netscape опубликовала тестовый набор, включающий некоторые тесты для DOM Level 2 (доступный на странице http://developer.netscape.com/evangelism/tools/testsuites/). Netscape также опубликовала предвзятое (и устаревшее) сравнение совместимости с DOM ранних релизов Mozilla и IE 5.5 (доступное на странице http://home.netscape.com/browsers/future/standards.html). И наконец, вы также можете найти информацию о совместимости и соответствии стандартам на независимых сайтах в Интернете. Один из достойных упоминания сайтов публикует Петер-Пауль Кох (Peter-Paul Koch). Ссылку на таблицу совместимости DOM можно найти на его главной странице, посвященной JavaScript (http://www.xs4all.nl/~ppk/js/).

Совместимость с DOM в Internet Explorer
Поскольку IE – наиболее широко используемый веб-броузер, несколько особых замечаний о его совместимости со спецификациями DOM будут здесь уместны. IE 5 и более поздние версии достаточно хорошо поддерживают базовые и HTML-средства Level 1, чтобы запускать примеры из этой главы, и достаточно хорошо поддерживают ключевые возможности CSS Level 2 для того, чтобы запускать большинство примеров8. К сожалению, IE 5, 5.5 и 6 не поддерживают модуль Events из DOM Level 2, даже несмотря на то, что корпорация Microsoft участвовала в определении этого модуля и имела достаточно времени для его реализации в IE 6. Как мы увидим в главе 19, обработка событий играет ключевую роль в клиентском Java-Script, и отсутствие в IE поддержки стандартной модели обработки событий затрудняет разработку развитых клиентских веб-приложений. Хотя IE 6 заявляет (через свой метод hasFeature()) о поддержке базовых и HTML-интерфейсов стандарта DOM Level 1, фактически эта поддержка не полна. Наиболее вопиющая проблема, с которой вы, скорее всего, столкнетесь, – небольшая, но неприятная: IE не поддерживает константы типов узлов, определяемых в интерфейсе Node. Вспомните, что каждый узел в документе имеет свойство nodeType, задающее тип данного узла. СпецификацияDOM также утверждает, что интерфейс Node определяет константы, представляющие каждый из определяемых им типов узлов. Например, константа Node.ELEMENT_NODE представляет узел Element. В IE (по крайней мере, до версии 6 включительно) эти константы просто не существуют.

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

Например:
if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)
// Проверяем, что n является объектом Element

Хороший стиль программирования требует, чтобы в код помещались константы, а не жестко кодируемые целые литералы, и те, кто захочет сделать код переносимым, могут включить в программу следующий код для определения констант, если они отсутствуют:

If (!window.Node) {
var Node = { // Если объект Node отсутствует, определяем
ELEMENT_NODE: 1, // его со следующими свойствами и значениями.
ATTRIBUTE_NODE: 2, // Обратите внимание, что это только типы узлов
TEXT_NODE: 3, // HTML. Для XML-узлов вам нужно определить
COMMENT_NODE: 8, // здесь другие константы.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}

Независимые от языка интерфейсы DOM
Хотя стандарт DOM появился благодаря желанию иметь общий API для программирования динамического HTML, модель DOM интересна не только веб-программистам. На самом деле сейчас этот стандарт наиболее интенсивно используется серверными программами на Java и C++ для анализа документов XML и манипуляции ими. Из-за наличия многих вариантов использования стандарт DOM был определен как независимый от языка. В данной книге описывается только привязка DOM API к JavaScript, но необходимо иметь в виду и некоторые другие моменты. Во-первых, заметьте, что свойства объекта в привязке к JavaScript обычно соответствуют паре методов get/set в привязке к другим языкам. Следовательно, когда программист, пишущий на Java, спрашивает вас о методе getFirstChild() интерфейса Node, надо понимать, что в JavaScript привязка Node API не определяет метода getFirst-Child(). Вместо этого она просто определяет свойство firstChild, и чтение этого свойства в JavaScript эквивалентно вызову метода getFirstChild() в Java. Другая важная особенность привязки DOM API к JavaScript в том, что некоторые объекты DOM ведут себя как массивы JavaScript. Если интерфейс определяет метод с именем item(), объекты, реализующие этот интерфейс, ведут себя так же, как доступные только для чтения массивы с числовым индексом. Предположим, что в результате чтения свойства childNodes узла по-лучен объект NodeList. Отдельные объекты Node из списка можно получить, во-первых, передав номер нужного узла методу item(), а во-вторых, рассматривая объект NodeList как массив и обращаясь к нему по индексу. Следующий код иллюстрирует эти две возможности:

Var n = document.documentElement; // Это объект Node.
var children = n.childNodes; // Это объект NodeList.
var head = children.item(0); // Это один из способов
// использования NodeList.
var body = children; // Но есть более простой способ!

Аналогично, если у объекта DOM есть метод namedItem(), передача строки этому методу – то же самое, что использование строки как индекса массива. Например, следующие строки кода представляют собой эквивалентные способы доступа к элементу формы:

Var f = document.forms.namedItem("myform");
var g = document.forms["myform"];
var h = document.forms.myform;

Стандарт DOM может использоваться различными способами, поэтому разработчики стандарта аккуратно определили DOM API таким образом, чтобы это не ограничивало возможность реализации API другими разработчиками. В частности, стандарт DOM определяет интерфейсы вместо классов. В объектно-ориентированном программировании класс – это фиксированный тип данных, который должен быть реализован в точном соответствии со своим определением. С другой стороны, интерфейс – это коллекция методов и свойств, которые должны быть реализованы вместе. Следовательно, реализация DOM может определять любые классы, которые считает нужным, но эти классы должны определять методы и свойства различных интерфейсов DOM. Такая архитектура имеет пару важных следствий. Во-первых, имена классов, используемые в реализации, могут не соответствовать напрямую именам интерфейсов, используемым в стандарте DOM (и в этой книге). Во-вторых, один класс может реализовывать более одного интерфейса. Рассмотрим, например, объект Document. Этот объект является экземпляром некоторого класса, определенного реализацией веб-броузера. Мы не знаем, какой именно это класс, но знаем, что он реализует интерфейс Document; то есть все методы и свойства, определенные интерфейсом Document, доступны нам через объект Document. Поскольку веб-броузеры работают с HTML-документами, мы также знаем, что объект Document реализует интерфейс
HTMLDocument и что нам также доступны все методы и свойства, определенные этим интерфейсом. Кроме того, если веб-броузер поддерживает таблицы стилей CSS и реализует модуль CSS DOM, объект Document также реализует интерфейсы DOM DocumentStyle и DocumentCSS. И если веб-броузер поддерживает модули Events и Views, Document также реализует интерфейсы DocumentEvent и DocumentView.

Модель DOM разбита на независимые модули, поэтому в ней определяется несколько дополнительных второстепенных интерфейсов, таких как Docu-mentStyle, DocumentEvent и DocumentView, каждый из которых определяет только один или два метода. Подобные интерфейсы никогда не реализуются независимо от базового интерфейса Document, и по этой причине я не описываю их отдельно. Ознакомившись с описанием интерфейса Document в «Справочнике по W3C DOM», вы обнаружите, что в нем также перечислены методы и свойства различных дополнительных интерфейсов. Аналогично, посмотрев на описание дополнительных интерфейсов, вы просто найдете перекрестную ссылку на базовый интерфейс, с которым они связаны. Исключения из этого правила составляют случаи, когда дополнительный интерфейс сложен. Например, интерфейс HTMLDocument всегда реализуется тем же объектом, что реализует интерфейс Document, но так как HTMLDocument
добавляет значительный объем новой функциональности, я отвел ему отдельную справочную страницу.

Важно также понимать, что поскольку стандарт DOM определяет интерфейсы, а не классы, он не определяет никаких методов-конструкторов. Если, например, требуется создать новый объект Text для вставки в документ, то нельзя просто написать:

Var t = new Text("это новый текстовый узел"); // Такого конструктора нет!

Стандарт DOM не может определять конструкторы, но определяет в интерфейсе Document несколько полезных методов-фабрик для создания объектов. Поэтому для создания нового узла Text в документе надо написать:

Var t = document.createTextNode("это новый текстовый узел");

Методы-фабрики, определенные в DOM, имеют имена, которые начинаются со слова «create». Кроме методов-фабрик, определяемых интерфейсом Document, несколько таких методов определяются интерфейсом DOMImplementation и доступны через document.implementation.

— младшим ). Все элементы дерева являются потомками корня, а тот является их предком . При этом все элементы и тексты, образующие их содержимое, являются узлами дерева документа.

Каждый элемент данного дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и набор атрибутов. Для перехода к объектной модели документа остается сделать единственный шаг: назвать все элементы дерева объектами, а их атрибуты сделать доступными для чтения и для изменения из сценариев и аплетов. В результате дерево элементов HTML-документа становится динамически управляемым; более того, теперь мы можем легко добавлять к каждому элементу новые свойства, помимо стандартных атрибутов HTML.

Именно такой подход был положен в основу динамической модели HTML обозревателей Microsoft, а затем принят за основу стандартов W3C, получивших название объектная модель документа (Document Object Model или DOM). При этом W3C расширил понятие DOM на любые XML-документы, рассматривая HTML DOM как специализированный частный случай с дополнительными возможностями. Таким образом, DOM — это модель HTML- и XML-документов, независимая от платформы и языка программирования, которая определяет:

• интерфейсы и объекты, которые используются для представления документа и манипулирования им;
• семантику этих интерфейсов и объектов, включая их атрибуты и реакцию на события;
• взаимосвязи между этими интерфейсами и объектами.

На сегодняшний день W3C стандартизовал DOM первого и второго уровней (DOM 1 и DOM 2); в стадии рабочего проекта находится DOM 3. Эти аббревиатуры соответственно обозначают следующее:

• DOM 1 описывает базовое представление XML- и HTML-документов в виде деревьев объектов;
• DOM 2 расширяет базовые интерфейсы DOM 1 и добавляет к ним поддержку событий и стилей;
• DOM 3 описывает загрузку и синтаксический анализом документов, а также их отображение и форматирование.

Учитывая текущее состояние вещей, мы рассматриваем здесь только DOM 2 (и содержащуюся в нем DOM 1). DOM 2 состоит из следующих групп взаимосвязанных интерфейсов:

• Core — базовые интерфейсы, определяющие представление любого XML-документа в виде дерева;
• View — интерфейсы, описывающие возможные отображения документа;
• Event — интерфейсы, определяющие порядок генерации и обработки событий;
• Style — интерфейсы, определяющие применение к документам таблиц стилей;
• Traversal & Range — интерфейсы, определяющие прохождение дерева документа и манипулирование областями его содержимого;
• HTML — интерфейсы, определяющие представление HTML-документа в виде дерева.

Начнем с определения базовых интерфейсов, лежащих в основе всех дальнейших спецификаций.

DOM 2 Core представляет XML-документы в виде деревьев, состоящих из узлов, которые, в свою очередь, также являются объектами и реализуют более специализированные интерфейсы. Одни типы узлов могут иметь детей, т. е. сами являться поддеревьями, другие являются листьями, т. е. детей не имеют. В следующей таблице сведены все возможные типы узлов абстрактного документа; для каждого типа узлов перечислены те узлы, которые могут быть его детьми. О понятиях, соответствующих перечисленным узлам, см. описание структуры XML-документа .

Кроме того, DOM 2 Core содержит спецификацию интерфейсов NodeList (упорядоченные списки узлов, доступных по номеру в списке) и NamedNodeMap (неупорядоченные списки узлов, доступных по своему имени). Эти объекты являются живыми , т. е. любое изменение документа автоматически влечет изменение всех связанных с ним списков.

Следует подчеркнуть, что DOM 2 Core содержит два набора интерфейсов, каждый из которых обеспечивает полный доступ ко всем элементам документа. Первый набор представляет объектно-ориентированный подход со следующей иерархией наследования: документ — составляющие его элементы — их атрибуты и текстовое содержимое. При таком рассмотрении дерева документа мы говорим о иерархии объектов . Второй подход построен по принципу "все есть узлы (Nodes)". Здесь все составляющие документа рассматриваются как равноправные узлы его дерева, и мы можем говорить только о иерархии узлов . Таким образом, DOM 2 по своей сути является избыточной, но предоставляет нам возможность в зависимости от задачи рассматривать документ тем или иным способом.

Все интерфейсы DOM 2 Core подразделяются на основные (fundamental) и дополнительные (extended). Основными являются интерфейсы , , , , Node , NodeList , NamedNodeMap , CharacterData , Attr , Element , Text и Comment . Эти интерфейсы должны поддерживаться всеми реализациями DOM, как для XML-, так и для HTML-документов. Дополнительные интерфейсы ориентированы на XML-документы, поэтому реализации DOM для HTML могут их не поддерживать. К ним относятся CDATASection , DocumentType , Notation , Entity , EntityReference и ProcessingInstruction .

В целях независимости от языка и платформы DOM определяет следующие типы:

Ниже приведено краткое описание всех интерфейсов DOM с указанием уровня модели (DOM 1 или DOM 2), в которой определено то или иное свойство интерфейса. Спецификации W3C написаны на платформо-независимом языке IDL. Мы же приводим их в соответствии с синтаксисом JavaScript, который на сегодня является основным сценарным языком.

Вместе с описание стандарта мы приводим краткое описание его реализации в объектных моделях Microsoft и Gecko. При этом следует учитывать, что реализации Microsoft для XML и HTML совершенно независимы (они реализуются соответственно программными компонентами XMLDOM и MSHTML), тогда как в Gecko объектная модель одинакова для HTML- и XML-документов. Основное внимание в последующем изложении уделено DOM для HTML; XML DOM подробно будет рассмотрена в Части VIII.

Объект DOMException является прототипом всех исключительных ситуаций, которые могут возникнуть в процессе обработки документа. Он имеет единственное свойство code типа Number , которое содержит номер исключения согласно следующей таблицы:

Интерфейс DOMImplementation содержит методы, выполнение которых не зависит от конкретной объектной модели документа. Он доступен через свойство объекта .

Метод createCSSStyleSheet создает новый объект CSSStyleSheet и возвращает указатель на него. Этот метод должен поддерживаться только теми реализациями DOM, которые поддерживают CSS. Объект создается вне контекста документа; DOM 2 не позволяет поключить вновь созданную таблицу стилей к документу. Аргумент title задает титул таблицы стилей, а media — список устройств отображения через запятую.

Метод createDocument создает новый объект и возвращает указатель на него. Он предназначен для создания XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен корневого элемента документа, qualifiedName — его ограниченное имя , а doctype — тип создаваемого документа (может иметь значение null ).

Метод createDocumentType создает пустой узел типа DocumentType и возвращает указатель на него. Он предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент qualifiedName задает ограниченное имя создаваемого типа документа, publicId — публичный идентификатор внешнего раздела , а systemId — системный идентификатор внешнего раздела .

Метод hasFeature возвращает true , если реализация DOM поддерживает указанное свойство, и false в противном случае. Имя свойства (в любом регистре) задается аргументом feature ; оно должно соответствовать правилам образования имен XML . Аргумент version задает имя версии проверяемого свойства. Если он не задан, то возвращается true , если поддерживается хотя бы какая-то версия данного свойства.

В Gecko значениями feature могут быть строки "XML" и "HTML", а значением version — строки "1.0" и "2.0". Пример:

Alert(document.implementation.hasFeature("HTML", "1.0")); alert(document.implementation.hasFeature("HTML", "2.0")); alert(document.implementation.hasFeature("HTML", "3.0"));

Первые два оператора alert выведут строку true , а третий false .

В Microsoft XMLDOM значениями feature могут быть строки "XML", "DOM" и "MS-DOM", а значением version — строка "1.0". Пример:

Var objDoc = new ActiveXObject("Microsoft.XMLDOM"); alert(objDoc.implementation.hasFeature("XML", "1.0")); alert(objDoc.implementation.hasFeature("XML", "2.0"));

Первый оператор alert выведет строку true , а второй false .

Интерфейс DocumentFragment является потомком интерфейса Node и наследует все его свойства и методы. Как и вытекает из его названия, он предназначен для операций с фрагментами документов (извлечение части дерева документа, создание нового фрагмента документа, вставка фрагмента в качестве сына какого-либо узла и т. п.). Отметим, что при вставке объекта типа DocumentFragment в узел Node , способный иметь детей, вставляются все дети этого объекта, но не сам объект. Примеры см. в описании интерфейса Node .

Интерфейс Document соответствует XML- или HTML-документу. Он является основой для доступа к содержанию документа и для создания его составляющих.

Свойство doctype возвращает тип данного документа (типа DocumentType). Для HTML-документов и для XML-документов, не имеющих декларации типа документа , возвращается null .

Свойство documentElement возвращает корневой элемент данного документа (типа Element). Для HTML-документов возвращается элемент HTML . Пример: оператор

Alert(document.documentElement.tagName);

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

Свойство implementation возвращает объект типа , описывающий данную реализацию DOM.

Свойство styleSheets возвращает объект типа StyleSheetList , соответствующий списку внешних и внутренних таблиц стилей документа. Это свойство поддерживается только теми реализациями DOM, которые поддерживают динамические таблицы стилей .

Метод createAttribute создает новый объект типа Attr и возвращает указатель на него. Аргумент name задает имя создаваемого атрибута. У нового объекта атрибут nodeName имеет значение name , а атрибуты localName , prefix и namespaceURI равны null . В дальнейшем созданный атрибут может быть присвоен какому-либо элементу методом Element.setAttributeNode .

Пример создания атрибута для элемента HTML:

Var myDiv = document.getElementById("idDiv"); var attr = document.createAttribute("temp"); attr.value = "temporary"; myDiv.setAttributeNode(attr); alert(myDiv.getAttribute("temp"));

Оператор alert выведет строку temporary .

Пример создания атрибута в Microsoft XMLDOM:

Var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load("c:\My Documents\books.xml"); var root = xmlDoc.documentElement; var newAttr = xmlDoc.createAttribute("temp"); newAttr.value = "temporary"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));

Здесь оператор alert также выведет строку temporary .

Метод createAttributeNS создает новый объект типа Attr и возвращает указатель на него. Он предназначен для XML-документов и для HTML-документов может не поддерживаться. Аргумент namespaceURI задает URI пространства имен , а qualifiedName — ограниченное имя создаваемого атрибута в этом пространстве имен. Созданный объект типа Attr имеет следующие атрибуты:

В дальнейшем созданный атрибут может быть присвоен какому-либо элементу методом Element.setAttributeNode .

Метод createCDATASection создает новый объект типа CDATASection и возвращает указатель на него. Он предназначен только для XML-документов; попытка вызвать его в HTML DOM генерирует исключение NOT_SUPPORTED_ERR . Аргумент data задает содержимое создаваемой. Пример создания секции CDATA в Microsoft XMLDOM:

Var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load("c:\My Documents\books.xml"); var root = xmlDoc.documentElement; var newSection = xmlDoc.createCDATASection("Hello World!"); root.appendChild(newSection);

Метод createComment создает новый объект типа Comment и возвращает указатель на него. Аргумент data задает содержимое создаваемого комментария. Пример создания комментария в Gecko:

Var root = document.documentElement.firstChild; var comm = document.createComment("Это комментарий."); root.appendChild(comm);

Метод createDocumentFragment создает новый пустой объект типа и возвращает указатель на него. Пример создания фрагмента документа в Gecko:

Var elem = document.documentElement.firstChild; var o = document.createDocumentFragment(); elem.appendChild(o);

Метод createElement создает новый объект типа Element и возвращает указатель на него. Аргумент tagName задает тег создаваемого элемента. У нового объекта атрибут nodeName имеет значение tagName , а атрибуты localName , prefix и namespaceURI равны null . Если объект имеет атрибуты со значениями по умолчанию, то автоматически создаются соответствующие узлы Attr и присоединяются к элементу.

Примечания :

Подготовил: Евгений Рыжков Дата публикации: 15.11.2010

Дерево документа (document tree) — это схема построения HTML документа, которая показывает связи между различными элементами страницы: порядок следования и вложенность элементов. Эта схема помогает ориентироваться в этой, на первый взгляд, хаотичной каше HTML тегов.

Веб разработчику дерево документа помогает при написании CSS правил и Javascript сценариев.

Не нужно путать дерево документа и объектную модель документа (DOM). DOM — понятие более сложное (о нем будет написано немного позже).

Чтобы не вдаваться в долгие и нудные объяснения, почему дерево документов назвали деревом, рассмотрим пример — возьмем простой HTML код:

Загоовок страницы Основной заголовок

абзац текста.

• пункт 1
• пункт 2

Так видят HTML код непросвещенные аборигены, которые случайно нажали просмотр кода страницы. А вот наметанный глаз веб разработчика разберет его по полочкам, увидит все уровни вложенности и взаимосвязи. Он выстроит из хаоса четкую иерархическую структуру в виде дерева (потому что схема похожа на очертания дерева):

Между элементами дерева документа существуют определенные связи. Рассмотрим их.

Из схематического изображения дерева, да и из самого HTML кода, понятно, что одни элементы являются вложенными в другие. Элементы, которые содержат другие, являются предками (ancestor) по отношению к во всем вложенным в него. Вложенные в свою очередь являются его потомками (descendant).

Для наглядности рассмотрим одну ветку нашего дерева:

Каждый предок может иметь неограниченное число потомков. Каждый потомок будет иметь число предков в зависимости от структуры дерева и в какой ветке он будет расположен, но в любом случае как минимум один предок будет.

Родитель (parent) — это непосредственный предок (предок первого уровня) элемента. И наоборот, непосредственный потомок (потомок первого уровня) называется дочерним элементом (child).

Каждый родитель может иметь неограниченное число дочерей. У дочернего элемента будет только один родитель.

Элемент-родитель еще называют прямой предок , а дочерний элемент — прямой потомок . Это что-то вроде семантических названий.

Сестринские элементы (siblings) — это группа из двух и более элементов, у которых общий родитель. Элементы не обязательно должны быть одного типа, просто у них должен быть общий родитель.

Смежные элементы (adjacent) — это сестринские элементы, которые расположены «по соседству».

Тут должно быть все понятно из самих названий терминов. Предыдущий сестринский (preceding sibling) — предыдущий по коду сестринский элемент. На нашей примере-ветке для

это будет

Для

— , а для не будет предыдущего сестринского.

Аналогично и следующий сестринский (following sibling): для —

Для

—

, для
— нет.
Предыдущий и следующий

Предыдущий элемент (preceeding) — такой же предыдущий элемент по коду, только без ограничений сестринских отношений. Для нашей ветки: для

это будет

Для

— , для — .

И XHTML, которые были определены в определениях собственного синтаксиса, HTML5 описывается определениями объектной модели документа (DOM) - употребляют внутреннее представление в виде дерева для отображения документа. К примеру, представьте для себя очень небольшой документ, состоящий из заголовка странички, заголовка и тела параграфа. Дерево DOM может смотреться так:

Дерево DOM содержит в себе title элемент в блоке head и h1 и p в body.

Преимущество описания HTML5 в определениях объектной модели документа в том, что язык может быть определен независимо от синтаксиса. Есть преимущественно два синтаксиса языка для представления документа: сериализация HTML (HTML5) и сериализация XML (XHTML5).

HTML относится к синтаксису пришедшему из SGML(ранешнего HTML), но определяется большей совместимостью с реальной поддержкой браузерами HTML на практике.

An HTML Document Example

Как и в прошлых версиях HTML, некие теги необязательны и автоматом предполагаются.

Сериализация XML происходит от синтаксиса XML 1.0 и места имен, также как XHTML 1.0.

An HTML Document Example

This is an example HTML document.

Исключая отличия в присутствии и отсутствии атрибута xmlns, эти два примера эквивалентны.

Браузеры употребляют MIME-тип для выбора. Хоть какой документ поданный как text/html должен удовлетворять требованиям спецификации HTML и хоть какой документ объявленный как XML MIME тип (таковой как application/xhtml+xml) должен подходить под спецификацию XML.

Создатели делают осознанный выбор что использовать, который может быть основан на ряде разных причин. Разработчики не должны без предпосылки выбирать один либо другой; каждый оптимизирован для разных ситуаций.

Достоинства использования HTML
• Оборотная сопоставимость с существующими браузерами.
• Знакомый синтаксис.
• Неприхотливый синтаксис (не будет "Yellow Screen of Death" если будет допущена ошибка).
• Синтаксис допускающий опускание неких тегов и атрибутов.
Достоинства использования XHTML
• Серьезный синтаксис XML, который некие создатели сочтут комфортным для поддержки.
• Соединяется воедино впрямую с другими XML словарями (такими как SVG и MathML).
• Внедрение XML обработки.
Сотрудничество

Работа над HTML5 стремительно продвигается, но окончание ожидается только через пару лет. Для того чтоб сделать различные испытания и добиться взаимодействия реализаций удовлетворяющих требованиям по текущим оценкам будет нужно от 10 до 15 лет работы. В протяжении всего шага разработки отзывы от широкого круга пользователей, в том числе WEB дизайнеров, разработчиков, производителей CMS и средств разработки, производителей браузеров очень важны для заслуги фурора. Вклад в развитие HTML5 не только лишь приветствуется, да и интенсивно поощряется.

В дополнение к спецификации, есть некоторое количество других источников, предназначенных для того, чтоб люди лучше понимали процесс.

• The Differences from HTML 4 обрисовывает конфигурации по сопоставлению с предшествующей версией HTML
• The HTML Design Principles дискуссируются принципы, которые помогают принять решения. Они посодействуют для вас осознать базы имеющихся дизайнерских решений.
• The WEB Developer`s Guide to HTML5, не так давно открывшийся ресурс, сделанный, чтоб посодействовать WEB дизайнерам и разработчикам осознать все что они должны знать для написания конформных HTML5 документов. Предоставляются руководящие принципы и описываются наилучшие решения.

Есть много методов внести собственный вклад в разработку. Вы сможете присоединится к W3C`s HTML WG и подписаться/способствовать рассылкам HTML WG mailing lists либо wiki. Вы также сможете участвовать в форуме WHATWG forum, писать комментарии либо статьи в блоге WHATWG blog.

Работа с DOM-моделью

Каждый объект Window имеет свойство document , ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.

Обзор модели DOM

Объектная модель документа (Document Object Model, DOM) - это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.

Прежде всего, следует понимать, что вложенные элементы HTML или XML-документов представлены в виде дерева объектов DOM. Древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и

И узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

Пример документа Это HTML-документ

Пример простого текста.

DOM-представление этого документа приводится на следующей диаграмме:

Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно узнать, что терминология для их описания была заимствована у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу. Узлы, находящиеся на том же уровне и имеющие того же родителя, называются сестринскими . Узлы, расположенные на любое число уровней ниже другого узла, являются его потомками. Родительские, прародительские и любые другие узлы, расположенные выше данного узла, являются его предками.

Каждый прямоугольник на этой диаграмме является узлом документа, который представлен объектом Node . Обратите внимание, что на рисунке изображено три различных типа узлов. Корнем дерева является узел Document, который представляет документ целиком. Узлы, представляющие HTML-элементы, являются узлами типа Element, а узлы, представляющие текст, - узлами типа Text. Document, Element и Text - это подклассы класса Node. Document и Element являются двумя самыми важными классами в модели DOM.

Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:



На этой диаграмме следует также отметить наличие большого количества подтипов класса HTMLElement, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов. Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML.

Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

по значению атрибута id;

по значению атрибута name;

по имени тега;

по имени класса или классов CSS;

по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов описываются в следующих подразделах.

Выбор элементов по значению атрибута id

Все HTML-элементы имеют атрибуты id. Значение этого атрибута должно быть уникальным в пределах документа - никакие два элемента в одном и том же документе не должны иметь одинаковые значения атрибута id. Выбрать элемент по уникальному значению атрибута id можно с помощью метода getElementById() объекта Document:

Var section1 = document.getElementById("section1");

Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам id этих элементов и используйте возможность их поиска по этим значениям.

В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.

Выбор элементов по значению атрибута name

HTML-атрибут name первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту id, атрибут name присваивает имя элементу. Однако, в отличие от id, значение атрибута name не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от id, атрибут name допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы и .

Выбрать HTML-элементы, опираясь на значения их атрибутов name, можно с помощью метода getElementsByName() объекта Document:

Var radiobuttons = document.getElementsByName("favorite_color");

Метод getElementsByName() определяется не классом Document, а классом HTMLDocument, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект NodeList , который ведет себя, как доступный только для чтения массив объектов Element.

В IE метод getElementsByName() возвращает также элементы, значения атрибутов id которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями браузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов name и id.

Выбор элементов по типу

Метод getElementsByTagName() объекта Document позволяет выбрать все HTML или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты Element всех элементов в документе, можно следующим образом:

Var spans = document.getElementsByTagName("span");

Подобно методу getElementsByName(), getElementsByTagName() возвращает объект NodeList. Элементы документа включаются в массив NodeList в том же порядке, в каком они следуют в документе, т.е. первый элемент

В документе можно выбрать так:

Var firstParagraph = document.getElementsByTagName("p");

Имена HTML-тегов не чувствительны к регистру символов, и когда getElementsByTagName() применяется к HTML-документу, он выполняет сравнение с именем тега без учета регистра символов. Переменная spans, созданная выше, например, будет включать также все элементы , которые записаны как .

Можно получить NodeList, содержащий все элементы документа, если передать методу getElementsByTagName() шаблонный символ «*».

Кроме того, классом Element также определяет метод getElementsByTagName(). Он действует точно так же, как и версия метода в классе Document, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы внутри первого элемента

Можно следующим образом:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

По историческим причинам класс HTMLDocument определяет специальные свойства для доступа к узлам определенных типов. Свойства images , forms и links , например, ссылаются на объекты, которые ведут себя как массивы, доступные только для чтения, содержащие элементы , и (но только те теги , которые имеют атрибут href). Эти свойства ссылаются на объекты HTMLCollection, которые во многом похожи на объекты NodeList, но дополнительно могут индексироваться значениями атрибутов id и name.

Объект HTMLDocument также определяет свойства-синонимы embeds и plugins , являющиеся коллекциями HTMLCollection элементов . Свойство anchors является нестандартным, но с его помощью можно получить доступ к элементам , имеющим атрибут name, но не имеющим атрибут href. Свойство scripts определено стандартом HTML5 и является коллекцией HTMLCollection элементов .

Кроме того, объект HTMLDocument определяет два свойства, каждое из которых ссылается не на коллекцию, а на единственный элемент. Свойство document.body представляет элемент HTML-документа, а свойство document.head - элемент . Эти свойства всегда определены в документе: даже если в исходном документе отсутствуют элементы и , браузер создаст их неявно. Свойство documentElement объекта Document ссылается на корневой элемент документа. В HTML-документах он всегда представляет элемент .

Выбор элементов по классу CSS

Значением HTML-атрибута class является список из нуля или более идентификаторов, разделенных пробелами. Он дает возможность определять множества связанных элементов документа: любые элементы, имеющие в атрибуте class один и тот же идентификатор, являются частью одного множества. Слово class зарезервировано в языке JavaScript, поэтому для хранения значения HTML-атрибута class в клиентском JavaScript используется свойство className.

Обычно атрибут class используется вместе с каскадными таблицами стилей CSS, с целью применить общий стиль отображения ко всем членам множества. Однако кроме этого, стандарт HTML5 определяет метод getElementsByClassName() , позволяющий выбирать множества элементов документа на основе идентификаторов в их атрибутах class.

Подобно методу getElementsByTagName(), метод getElementsByClassName() может вызываться и для HTML-документов, и для HTML-элементов, и возвращает «живой» объект NodeList, содержащий все потомки документа или элемента, соответствующие критерию поиска.

Метод getElementsByClassName() принимает единственный строковый аргумент, но в самой строке может быть указано несколько идентификаторов, разделенных пробелами. Соответствующими будут считаться все элементы, атрибуты class которых содержат все указанные идентификаторы. Порядок следования идентификаторов не имеет значения. Обратите внимание, что и в атрибуте class, и в аргументе метода getElementsByClassName() идентификаторы классов разделяются пробелами, а не запятыми.

Ниже приводится несколько примеров использования метода getElementsByClassName():

// Отыскать все элементы с классом "warning" var warnings = document.getElementsByClassName("warning"); // Отыскать всех потомков элемента с идентификаторам "log" // с классами "error" и "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("fatal error");

Выбор элементов с использованием селекторов CSS

Каскадные таблицы стилей CSS имеют очень мощные синтаксические конструкции, известные как селекторы, позволяющие описывать элементы или множества элементов документа. Наряду со стандартизацией селекторов CSS3 , другой стандарт консорциума W3C, известный как Selectors API , определяет методы JavaScript для получения элементов, соответствующих указанному селектору.

Ключевым в этом API является метод querySelectorAll() объекта Document. Он принимает единственный строковый аргумент с селектором CSS и возвращает объект NodeList, представляющий все элементы документа, соответствующие селектору.

В дополнение к методу querySelectorAll() объект документа также определяет метод querySelector() , подобный методу querySelectorAll(), - с тем отличием, что он возвращает только первый (в порядке следования в документе) соответствующий элемент или null, в случае отсутствия соответствующих элементов.

Эти два метода также определяются классом Elements. Когда они вызываются относительно элемента, поиск соответствия заданному селектору выполняется во всем документе, а затем результат фильтруется так, чтобы в нем остались только потомки использованного элемента. Такой подход может показаться противоречащим здравому смыслу, так как он означает, что строка селектора может включать предков элемента, для которого выполняется сопоставление.

Структура документа и навигация по документу

После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект Document можно представить как дерево объектов Node. Тип Node определяет свойства, позволяющие перемещаться по такому дереву. Существует еще один прикладной интерфейс навигации по документу, как дерева объектов Element.

Документы как деревья узлов

Объект Document, его объекты Element и объекты Text, представляющие текстовые фрагменты в документе - все они являются объектами Node. Класс Node определяет следующие важные свойства:

parentNode

Родительский узел данного узла или null для узлов, не имеющих родителя, таких как Document.

childNodes

Доступный для чтения объект, подобный массиву (NodeList), обеспечивающий представление дочерних узлов.

firstChild, lastChild

Первый и последний дочерние узлы или null, если данный узел не имеет дочерних узлов.

nextSibling, previousSibling

Следующий и предыдущий братские узлы. Братскими называются два узла, имеющие одного и того же родителя. Порядок их следования соответствует порядку следования в документе. Эти свойства связывают узлы в двусвязный список.

nodeType

Тип данного узла. Узлы типа Document имеют значение 9 в этом свойстве. Узлы типа Element - значение 1. Текстовые узлы типа Text - значение 3. Узлы типа Comments - значение 8 и узлы типа DocumentFragment - значение 11.

nodeValue

Текстовое содержимое узлов Text и Comment.

nodeName

Имя тега элемента Element, в котором все символы преобразованы в верхний регистр.

С помощью этих свойств класса Node можно сослаться на второй дочерний узел первого дочернего узла объекта Document, как показано ниже:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

Допустим, что рассматриваемый документ имеет следующий вид:

TestHello World!

Тогда вторым дочерним узлом первого дочернего узла будет элемент . В свойстве nodeType он содержит значение 1 и в свойстве nodeName - значение «BODY».

Однако, обратите внимание, что этот прикладной интерфейс чрезвычайно чувствителен к изменениям в тексте документа. Например, если в этот документ добавить единственный перевод строки между тегами и , этот символ перевода строки станет первым дочерним узлом (текстовым узлом Text) первого дочернего узла, а вторым дочерним узлом станет элемент , а не .

Документы как деревья элементов

Когда основной интерес представляют сами элементы документа, а не текст в них (и пробельные символы между ними), гораздо удобнее использовать прикладной интерфейс, позволяющий интерпретировать документ как дерево объектов Element, игнорируя узлы Text и Comment, которые также являются частью документа.

Первой частью этого прикладного интерфейса является свойство children объектов Element. Подобно свойству childNodes, его значением является объект NodeList. Однако, в отличие от свойства childNodes, список children содержит только объекты Element.

Обратите внимание, что узлы Text и Comment не имеют дочерних узлов. Это означает, что описанное выше свойство Node.parentNode никогда не возвращает узлы типа Text или Comment. Значением свойства parentNode любого объекта Element всегда будет другой объект Element или корень дерева - объект Document или DocumentFragment.

Второй частью прикладного интерфейса навигации по элементам документа являются свойства объекта Element, аналогичные свойствам доступа к дочерним и братским узлам объекта Node:

firstElementChild, lastElementChild

Похожи на свойства firstChild и lastChild, но возвращают дочерние элементы.

nextElementSibling, previousElementSibling

Похожи на свойства nextSibling и previousSibling, но возвращают братские элементы.

childElementCount

Количество дочерних элементов. Возвращает то же значение, что и свойство children.length.

Эти свойства доступа к дочерним и братским элементам стандартизованы и реализованы во всех текущих браузерах, кроме IE.