Урок 10. Иерархия объектов в JavaScript

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстается в виде объекта. И каждый такой объект может иметь определенные свойства и методы. Язык JavaScript позволяет легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. В качестве примера рассмотрим простую HTML-страницу:

<html>
<head><title>Page with image</title></head>
<body>
	<center>
		<img src="cat.jpg" name="cat" width="128" height="128">
	</center>
	<p>
	<form name="form1">
		Name:
		<input type="text" name="uname" value=""><br>
		e-mail:
		<input type="text" name="email" value=""><br><br>
		<input type="button" name="but_push" value="Push me"
			onClick="alert('Hi')"><br><br>
		<input type="text" name="input_text" value="Привет">
		<input type="button" value="На английском"
			onClick="document.form1.input_text.value='Hello'">
	</form>
	</p>
	<p>
	<a href="http://inf1.info">Информатика</a>
	</p>
</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]. Хотя чаще всего доступ к объекту получают по его имени.

<html>
<head><title>Objects</title>
<script>
	function out() {
		alert(document.form1.fieldtext.value);
	}
	function check() {
		// проверка состояния флажка
		var str = "The checkbox is ";
		if (document.form1.box.checked)
			str += "checked"
		else
			str += "not checked";
		alert(str);
	}
</script>
</head>
<body>
	<form name="form1">
		<input type="text" name="fieldtext" value="Non">
		<input type="button" name="button1" value="Button 1"
			onClick="out()">
		<br>
		<input type="checkbox" name="box" CHECKED>
		<input type="button" name="button2" value="Button 2"
			onClick="check()">
	</form>
</body>
</html>