Чтение онлайн

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

В главах 13 и 14 говорилось, что каждое окно, вкладка и фрейм веб-броузера представлено объектом

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

Эта глава начинается с описания базовой архитектуры DOM, а затем она расскажет:

• Как выбирать отдельные элементы документа.

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

• Как читать и изменять значения атрибутов элементов документа.

• Как читать и изменять содержимое документа.

• Как изменять структуру документа, создавая, вставляя и удаляя узлы.

• Как работать с HTML-формами.

В заключительном разделе этой главы рассматриваются различные особенности документов, включая свойство

, метод и приемы получения текста, выделенного в документе.

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

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

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

DOM-представление этого документа приводится на рис. 15.1.

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

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

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

Тип

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

На рис. 15.2 следует также отметить наличие большого количества подтипов класса

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

Наконец, обратите внимание, что на рис. 15.2 изображены некоторые типы узлов, которые нигде до сих пор не упоминались. Узлы

представляют HTML- или XML-комментарии. Поскольку комментарии являются обычными текстовыми строками, эти узлы во многом подобны узлам , представляющим отображаемый текст документа. Тип , обобщенный предок типов и , определяет методы, общие для узлов этих двух типов. Узлы типа представляют XML- или HTML-атрибуты, но они практически никогда не используются, потому что класс определяет методы, позволяющие интерпретировать атрибуты, как пары имя/значение, а не как узлы документа. Объект (не изображен на рисунке) - это разновидность узлов, которая практически никогда не встречается в документах: он представляет последовательность узлов, не имеющих общего родителя. Объекты удобно использовать при выполнении манипуляций над документами, и подробнее об этом типе рассказывается в разделе 15.6.4. Модель DOM также определяет несколько редко используемых типов, представляющих, например, объявления типа документа и инструкции обработки XML.