JavaScript. Подробное руководство, 6-е издание, стр. 198

Этот промежуточный объект ведет себя как настоящий глобальный объект, за исключением того, что живет гораздо дольше. Если бы вы могли сравнить эти два объекта, вы едва ли смогли бы отличить их. Однако на самом деле нет никакой возможности сослаться на настоящий клиентский глобальный объект. Глобальный объект находится на вершине цепочки областей видимости, но свойства

<b>window, self, top, parent</b>
и
<b>frames</b>
ссылаются на промежуточные объекты. Метод
<b>window.open()</b>
возвращает промежуточный объект. Даже ключевое слово
<b>this</b>
в функциях верхнего уровня ссылается на промежуточный объект, а не на настоящий глобальный объект. [33]1

****************************************

15

Работа с документами

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

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

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

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

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

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

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

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

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

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

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

<b>refеггег</b>
, метод
<b>write()</b>
и приемы получения текста, выделенного в документе.

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

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

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

<b>&lt;body&gt;</b>
и
<b>&lt;р&gt;</b>
, и узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

<b>&lt;html&gt;</b>

<b>  &lt;head&gt;</b>

<b>    &lt;title&gt;Sample Document&lt;/title&gt;</b>

<b>  &lt;/head&gt;</b>

<b>  &lt;body&gt;</b>

<b>    &lt;h1&gt;An HTML Document&lt;/h1&gt;</b>

<b>    &lt;p&gt;This is a &lt;i&gt;simple&lt;/i&gt; document.</b>

<b>  <s>&lt;/body&gt;</s></b>

<b>&lt;/html&gt;</b>

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

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

JavaScript. Подробное руководство, 6-е издание - i_021.jpg

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

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

Тип

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