Документ HTML. Общие понятия
Прием в авторские монографии до 20 марта 2016 г.
В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. Например, Web-форма имеет такой большой объект как «документ в целом», также ряд более мелких объектов: «абзац-1», «абзац-2», «абзац-3», «рисунок». И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволит легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML.
Рассмотрим простой пример:
|
<html> <head> <title>Моя страничка </title> </head> <body bgcolor=#ffffff> <center> <img src="pic.gif" name="pic1" width=300 height=200> </center> <p> <form name="myForm"> Имя: <input type="text" name="name" value=""><br> e-Mail: <input type="text" name="email" value=""><br><br> <input type="button" value="Нажми меня" name="myButton" onClick="alert('ПРИВЕТ')"> </form> <p> <center> <img src="pic1.gif" name="pic1" width=300 height=15> <p> <a href="">Мой адресс</a> </center> </body> </html> |
Вот так выглядит эта страница на экране (с добавленными к ней комментариями):
Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри окна мы можем разместить документ HTML. Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript. К свойствам объекта document относятся, например, цвет фона для web-страницы. Однако для моей работы гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.
На следующем рисунке иллюстрируется иерархия объектов, создаваемая HTML-страницей из нашего примера:
Разумеется, необходимо иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого надо знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно, для обращения к первому рисунку нашей HTML-страницы, необходимо сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что отныне можно получать доступ к этому объекту, записав в JavaScript document.images[0].
Если же, например, необходимо узнать, какой текст ввел пользователь в первый элемент формы, то сперва надо выяснить, как получить доступ к этому объекту. И снова начинаем с вершины иерархии объектов. Затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0].
Вообще все объекты можно разделить на три группы:
1. Объекты браузера
2. Внутренние, или встроенные, объекты языка JavaScript
3. Объекты, связанные с тегами языка HTML
Объектами браузера являются зависимые от браузера объекты: window (окно), location (местоположение) и history (история). Внутренние объекты включают простые типы данных, такие как строки (string), математические константы (math), дата (date) и другие. Объекты, связанные с тегами HTML, соответствуют тегам, которые формируют текущий документ. Они включают такие элементы как гиперсвязи и формы.
Кравец Вера Владимировна
Главный редактор
vkravets@vsi.ru
vkravets@naukapro.ru
vkravets@naukapro.ru
Спасибо за проявленный интерес!
Все права защищены. Copyright © 2006-2020. Вера Кравец.