10.4. Объектная модель документа (DOM). Стандартный набор объектов в HTML-документе, их свойства и способ доступа к ним определяется объектной моделью документа (Document Object Model, сокращенно DOM). DOM позволяет управлять всеми элементами на веб-странице, изменять их свойства и содержание, создавать новые элементы. Объект Document. Для работы с документами HTML в языке JavaScript существует отдельный объект – Document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа. Любая веб-страница, которую вы просматриваете в окне браузера, может быть описана как набор объектов. Она включает собственно HTML-документ «в целом» и более мелкие объекты – элементы веб-страницы. Например, заголовок, абзац_1, абзац_2, абзац_3, рисунок, ссылка, форма и т. п. HTML-документ «в целом» и есть объект Document. Элементы веб-страницы называются HTML-объектами, поскольку определяются элементами языка HTML. Все HTML-объекты выступают в качестве дочерних по отношению к объекту Document. Благодаря этому вы можете обращаться к данным объектам из сценариев JavaScript. Совокупность описывающих веб-страницу объектов со всеми их методами и свойствами в языке JavaScript называется объектной моделью документа. Объект Document является главным в этой модели. Он содержит внутри себя множество подчиненных объектов и коллекций. Коллекция – это массив объектов, проиндексированный не только по числовым номерам элементов, но и по их именам и имеющий свойства и методы. Коллекция отличается от обычного массива именно наличием свойств и методов. Поэтому каждая коллекция сама по себе объект и в то же время свойство объекта Document. Рассмотрим, какие же коллекции существуют для объекта Document. • anchors – коллекция всех локальных меток («якорей»), размещенных в HTML-документе. Эти метки содержатся в тегах <a name="…"> </a> и применяются для организации ссылок внутри одной веб-страницы. • links – коллекция всех ссылок в HTML-документе, содержащихся в тегах <a href="…"> </a>. • images – массив всех изображений на веб-странице. • forms – коллекция всех форм в HTML-документе. Благодаря этим коллекциям сценарию JavaScript доступны все локальные метки, формы, изображения и ссылки в HTML-документе как элементы соответствующих массивов. Пример сценария, использующего одну из коллекций объекта Document, приведен в листинге 10.18. Листинг 10.18. Использование коллекции anchors. <html> <head> <title>Anchors</title> </head> <body> <!– Элементы страницы –> <a name="first">1 anchor</a><br /> <a name="second">2 anchor</a><br /> <a name="third">3 anchor</a><br /> <br />Количество "якорей" в этом HTML-документе: <!–Код JavaScript –> <script language=JavaScript> Document.write(document.anchors.length). </script> </body> </html> Данный сценарий демонстрирует использование массива anchors для определения количества «якорей» в HTML-документе. Команда document. write отображает количество «якорей» на странице в числовом выражении (рис. 10.17). Рис. 10.17. Использование коллекции anchors. Количество «якорей» подсчитывается с помощью команды document.anchors. length, где document – объект Document, anchor – массив всех «якорей» на веб-странице, а length – длина массива (то есть количество элементов в массиве). Аналогично можно определить количество всех ссылок, изображений и форм на веб-странице. Для этого вместо коллекции anchors в строку document. anchors. length достаточно подставить названия массивов: links, images или forms. Помимо коллекции, для объекта Document существуют свои свойства, анализируя которые, сценарий JavaScript может определить значения различных параметров веб-страницы. Рассмотрим эти свойства объекта Document. • alinkColor – содержимое атрибута alink. Он определяет цвет ссылок, выбранных пользователем. • linkColor – содержимое атрибута link, определяющего цвет еще не посещенных ссылок, размещенных в HTML-документе. • vlinkColor – содержимое атрибута vlink. Он задает цвет уже посещенных ранее ссылок, размещенных в HTML-документе. • bgColor – содержимое атрибута bgcolor. Применяется для создания цветного фона HTML-документа. Цвет задается либо в шестнадцатеричном виде (например, #F0F8FF), либо в виде названий цветов (например, red или white). • fgColor – содержимое атрибута text, определяющего цвет текста. Задается таким же образом, что и цвет фона веб-страницы bgcolor. • lastModified – дата последнего изменения HTML-документа. • location – полный URL-адрес текущей веб-страницы. • referrer – URL-адрес страницы, с которой была открыта данная веб-страница. • title – заголовок документа, заданный с помощью элемента TITLE. • URL – полный URL-адрес HTML-документа. Многие из перечисленных свойств объекта Document позволяют динамически изменять значения HTML-элементов, расположенных в блоке BODY. Например, фоновый цвет страницы, цвет ссылок, содержание заголовка документа. Большинство свойств объекта Document доступно сценарию JavaScript как для чтения, так и для записи. Следующий пример демонстрирует, как с помощью сценария JavaScript изменить свойства HTML-документа: цвет фона и текста, а также цвета посещенных, непосещенных и выбранных пользователем ссылок (листинг 10.19). Листинг 10.19. Свойства объекта Document. <html> <head> <title> Свойства объекта Document</title> <!–Код JavaScript –> <script language="JavaScript"> Document.bgColor = "#00FF80"; Document.fgColor = "#800080"; Document.linkColor = "#000000"; Document.alinkColor = "#FF0000"; Document.vlinkColor = "#4000FF"; </script> </head> <body bgcolor=white> <h1>Изменение цветового оформления страницы</h1> <h3>Щелкните по этим ссылкам: </h3> <p><a href="http://www.yandex.ru">Yandex</a> <p><a href="http://www.mail.ru">Бесплатная электронная почта</а> <p><a href="http://www.microsoft.соm">Сервер Microsoft</a> </body> </html> Результат работы сценария показан на рис. 10.18. Рис. 10.18. Изменение цвета фона, текста и ссылок. Обратите внимание, что данный сценарий переопределяет цвет фона веб-страницы, заданный параметром bgcolor=white в элементе BODY: document. bgColor = «#00FF80». Рассмотрим еще один пример сценария, в котором используется свойство lastModified объекта Document (листинг 10.20). Листинг 10.20. Использование свойства lastModified. <html> <head> <title> Свойство lastModified</title> </head> <body> <center> <!–Код JavaScript –> <script language="JavaScript"> Document.write("Последний раз страница редактировалась:<br>" +document. lastModified). </script> </center> </body> </html> Свойство lastModified позволяет узнать дату внесения последних изменений в содержание HTML-документа. В сценарии это реализовано в команде document.lastModified. Строка document. write() помещает полученную дату на веб-страницу (рис. 10.19). Рис. 10.19. Использование свойства lastModified. Во многих рассмотренных ранее примерах сценариев JavaScript вам не раз встречалась строка document. write(). Write() – это метод объекта Document, позволяющий отображать какую-либо информацию на веб-странице. Кроме этого широко используемого метода, сценарии JavaScript могут вызывать и другие методы, определенные для объекта Document. • close() – заставляет веб-страницу немедленно обновить свое содержимое после использования метода write(). Метод close() не имеет параметров и не возвращает значения. Поддерживается Internet Explorer, начиная с версии 4.0. • getElementsByName({имя_элемента}) – возвращает элемент, специфическое имя которого передано в качестве параметра. Данный метод поддерживается браузером Internet Explorer, начиная с версии 5.0. • getElementByld ({ID}) – возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод getElementById() имеет единственный параметр – имя элемента страницы. Поддерживается браузером Internet Explorer, начиная с версии 5.0. • getElementsByTagName({Имя тега}) – возвращает тег, имя которого передано в качестве параметра. Поддерживается браузером Internet Explorer, начиная с версии 5.0. • write() – записывает текст или HTML-код в текущее место документа. В браузере Microsoft Internet Explorer версии 5.0 появилась поддержка таких методов объекта Document, как getElementById(), getElementsByName() и getElementsByTagName(). Последний используется в сценариях JavaScript особенно часто. Рассмотрим пример такого сценария (листинг 10.21). Листинг 10.21. Использование метода getElementsByTagNameO. <html> <head> <title> Метод getElementsByTagName()</title> <!–Код JavaScript –> <script language="JavaScript"> Function getElements() //функция. { Var x=document.getElementsByTagName("input"); Alert(x.length); } </script> </head> <body> <!–Форма –> <input name="myInput" type="text" size="30" /><br /> <input name="myInput" type="text" size="30" /><br /> <input name="myInput" type="text" size="30" /><br /> <br /> <input type="button" onclick="getElements()" value="Посчитаем элементы input" /> </body> </html> Данный сценарий содержит функцию getElements(), которая производит подсчет всех элементов типа INPUT на веб-странице, а затем выводит результат в окне Alert (рис. 10.20). Рис. 10.20. Окно с количеством элементов. Функция срабатывает при нажатии кнопки в форме. Как видите, в этом HTML-документе содержится четыре элемента, обозначенные элементом INPUT: три поля для ввода и кнопка (рис. 10.21). Рис. 10.21. Элементы INPUT. Итак, мы рассмотрели один из главных объектов в языке JavaScript – объект Document, представляющий собой веб-страницу, загруженную в окно браузера. Благодаря определенным свойствам и методам через объект Document можно получить доступ к любым другим объектам, расположенным на веб-странице. Доступ к объектам документа. Сценарии JavaScript очень часто применяются для создания динамических вебстраниц, способных получать и обрабатывать произвольную информацию. Для этого необходимо организовать доступ сценария к определенным элементам веб-страницы. Доступ к различным объектам HTML-документа в языке JavaScript организован в строгом соответствии с иерархией объектов. Каждый объект иерархической структуры имеет свое имя. Например, на веб-странице может находиться несколько изображений с именами img1, img2 и img3. Если вы хотите обратиться к первому рисунку, то должны сориентироваться в иерархии объектов и начать с самой ее вершины. Главный объект на веб-странице называется Document. Все изображения на странице представлены как коллекция images. Причем первый рисунок всегда обозначается как images [0], второй как images [1], третий как images [2] и т. д. Иными словами, отсчет объектов в коллекции начинается не с единицы, а с нуля. Таким образом, вы можете получить доступ к первому изображению img1, записав в сценарии JavaScript document.images[0]. Чтобы получить доступ ко второму изображению img2, запишите в сценарии строку document. images [1]. Соответственно для получения доступа к третьему изображению img3 на веб-странице используйте конструкцию document.images[2]. Примечание. Как видите, номер изображения на веб-странице и номер изображения в коллекции отличаются на единицу. Тот же принцип действует по отношению к ссылкам и формам. Если вы хотите получить доступ к какому-либо элементу формы, снова необходимо начать с вершины иерархии объектов. Затем прослеживаете путь к объекту и последовательно записываете названия всех объектов, которые минуете. Например, чтобы узнать, какой текст ввел посетитель вашей веб-страницы в поле формы, необходимо обратиться к значению (value) данного поля. Для этого в сценарии JavaScript можно записать строку name= document. forms [0]. elements [0]. value. Полученная строка заносится в переменную name. И теперь вы можете работать с этой переменной, используя ее в других строках сценария JavaScript. Однако, если вы создаете сложную веб-страницу, процедура адресации к различным объектам по номеру становится весьма затруднительной. Например, довольно неудобно обращаться к объекту через строку document. forms [4]. elements [15]. Можно запутаться в количестве объектов на странице и неправильно указать номер нужного объекта. Во избежание подобной проблемы в JavaScript можно не только пользоваться существующими коллекциями объекта Document, но и самим присваивать различным объектам уникальные имена. Например, форме на вашей веб-странице можно присвоить имя myform с помощью оператора name: <form name="myform">. Эта запись означает, что первая форма, соответствующая объекту forms[0], получает уникальное имя myform. Точно так же нужно поступать по отношению к любому элементу формы. Вместо elements[0] вы можете указывать оператор name. Вместо name = document. forms[0].elements[0].value можно записать name = document.myf orm. element name.value. Такой прием значительно упрощает доступ к элементам HTML-документа, а следовательно, и программирование на JavaScript, особенно в случае с большими веб-страницами, содержащими множество объектов. Внимание! При написании имен объектов обязательно следите за положением регистра. Нельзя писать Myform вместо myform, поскольку язык JavaScript чувствителен к регистру и будет воспринимать их как совершенно разные имена объектов. Таким образом, доступ к объектам HTML-документа можно получить двумя способами: • используя коллекции и нумерацию объектов; • присваивая каждому объекту уникальное имя. В любом из этих случаев вам необходимо будет определить имя объекта и всех его предков. Объект высшего уровня всегда находится слева в выражении, и слева направо происходит переход к дочерним объектам. По правилам языка JavaScript родительские и дочерние объекты отделяются друг от друга точками. Рассмотрим несколько примеров, иллюстрирующих способы доступа к объектам веб-страницы. В листинге 10.22 приведен текст сценария, в котором данные, введенные пользователем в поле формы, передаются в функцию для дальнейшей обработки. Листинг 10.22. Передача данных в функцию. <html> <head> <!–Код JavaScript –> <script language="JavaScript"> Function doit(). { Var greeting="Мне нравится ". Alert(greeting + document.aform.color.value. + " " + document.aform.geometr.value). Var prich="Потому, что ". Alert(prich + document.aform.prichina.value). Alert("Количество букв в названии вашей фигуры ". + document.aform.geometr.value.length). } </script> </head> <body> <center> <!–Форма –> <form name="aform"> Ваша любимая геометрическая фигура: <input type="text" NAME="geometr"><p> Ваш любимый цвет: <input type="text" NAME="color"><p> Почему вам нравится эта фигура: <input type="text" NAME="prichina"><p> <input type="button" VALUE="Ответить" onClick="doit()"> </form> </center> </body> </html> В данном HTML-документе расположена форма с полями ввода и кнопкой (рис. 10.22). При ее нажатии обработчик событий onClick запускает функцию doit(), обрабатывающую данные, введенные пользователем в поля формы. Рис. 10.22. Элементы формы. Доступ к объектам формы в данном сценарии организован путем присвоения каждому объекту формы уникального имени и перечисления всех объектов в соответствии с их иерархией в документе. Самой форме присвоено имя aform. Каждому полю ввода также присвоены уникальные имена: geometr, color, prichina. Введенные пользователем данные передаются в функцию как значение value. В соответствии с иерархией объектов на первом месте стоит объект Document, далее идет форма, затем поле формы и, наконец, значение поля – текст, введенный пользователем. В сценарии эта цепочка объектов выглядит следующим образом: document. aform.geometr.value. Таким образом, функция doit() получает данные пользователя из значения value поля geometr формы aform в HTML-документе document. Аналогично происходит передача данных в функцию из других полей формы. Данные, полученные от формы, отображаются функцией в окне Alert (рис. 10.23). Рис. 10.23. Результат работы сценария. Рассмотрим еще один пример сценария JavaScript (листинг 10.23). Листинг 10.23. Смена изображений на веб-странице. <html> <head> <titlе>Смена картинок через массив</titlе> <!–Код JavaScript –> <script language="JavaScript"> Function myimage(pic) //функция. { Document.images[0].src=pic. } </script> </head> <body text="#000000" bgcolor="#FFFFCC" link="#0000EE" vlink="#551A8B" alink="#FF0000"> <!– Элементы страницы –> <h1> <font color="#000099">Просмотр фотографий</FОNТ> </h1> <center> <table cols=2 width="100%"> <caption> <font color="#000099" size=+2>Природа</fоnt> </caption> <tr> <td> <ul> <li><a href="javascript:myimage('a.jpg')">картинка1</li> <li><a href="javascript:myimage('b.jpg')">картинка2</li> <li><a href="javascript:myimage('c.jpg')">картинка3</li> <li><a href="javascript:myimage('d.jpg')">картинка4</li> <li><a href="javascript:myimage('e.jpg')">картинка5</li> <li><a href="javascript:myimage('f.jpg')">картинка6</li> <li><a href="javascript:myimage('g.jpg')">картинка7</li> </ul> </td> <td align=center valign=center> <img src="d.jpg"> </td> </tr> </table> </center> </body> </html> Данный сценарий позволяет просматривать различные фотографии природы на веб-странице (рис. 10.24). Рис. 10.24. Просмотр фотографий на странице. В HTML-документе размещена таблица с двумя столбцами. В первом столбце находятся ссылки на изображения, которые загружаются во второй столбец. Без сценария JavaScript реализация такой задачи практически невозможна. Сам сценарий находится в заголовке HEAD HTML-документа. Он содержит функцию myimage(pic), которой передаются названия рисунков. В функции определена строка, ответственная за смену изображений: document. images [0]. src=pic. Как видите, в данной строке указаны объект Document, массив изображений на странице (images [0]) и источник изображений (src). В массиве определен индекс [0], поскольку в веб-странице отображается только одна картинка. Как вы помните, нулевой индекс в коллекции соответствует первому изображению в HTML-документе. Изначально на странице отображается картинка d.jpg. Это определено в строке <IMG SRC="d.jpg">. При щелчке кнопкой мыши на ссылке с названием картинки запускается сценарий: <A HREF="javascript: myimage ('a.jpg')">. Фотографии сменяют друг друга благодаря тому, что название изображения из скобок передается в строку document.images [0].src=pic. Значение pic заменяется названием фотографии из выбранной ссылки, например 'a.jpg'. При выборе следующей ссылки значение pic опять заменяется названием фотографии, а точнее именем файла с изображением. С помощью данного сценария можно организовать удобный просмотр фотографий в одном окне браузера на одной веб-странице. Этот прием довольно часто используется в фотогалереях и интернет-магазинах. Итак, мы рассмотрели объекты HTML-документа. Это сама веб-страница и расположенные на ней элементы. Все они обладают своими свойствами. К каждому из них можно применить определенные действия, или методы. Эти методы позволяют управлять содержимым веб-страницы и динамически его изменять.