Web-программирование: «Java Script(JS): Коллекции DOM-объектов.
Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS").
Для удобства в JavaScript есть возможность обращаться к элементам DOM-объектов через коллекции. Например, коллекция картинок объекта document называется images. Следующий пример иллюстрирует применение этой коллекции:
|
<html>
<head> <title>Урок 87. Java Script (JS): </title> </head>
<body> <input type="submit" value="Нажми на меня" OnClick="ImageClick()"> <img src="Blue_01.png"> <img src="Yellow_04.png"> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function ImageClick() { a=document.images[0].src document.images[0].src=document.images[1].src document.images[1].src=a } </SCRIPT> </body>
</html> |
Вот скриншот этого примера (картинки меняются местами, когда мы щелкаем по кнопочке):
Существуют так же им другие коллекции:
-
forms - коллекция элементов form.
-
anchors - коллекция элементов, созданных тэгом <A> с атрибутом name.
-
links - коллекция элементов, созданных тэгом <A> с атрибутом HREF.
-
applets - коллекция элементов <applet>. Подробнее о работе с апплетами смотри тут.
-
embeds - коллекция элементов, созданных тэгом embed.
К элементам коллекции можно обращаться не только по индексу, но так же и по имени, заданному в атрибуте id, вот пример переписанный на использование имени тэгов:
|
<html>
<head> <title>Урок 87. Java Script (JS): </title> </head>
<body> <input type="submit" value="Нажми на меня" OnClick="ImageClick()"> <img src="Blue_01.png" id="first"> <img src="Yellow_04.png" id="second"> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function ImageClick() { a=document.images['first'].src document.images.first.src=document.images["second"].src document.images[1].src=a } </SCRIPT> </body>
</html> |
Так же по имени можно обращаться и к элементам массива, который вернула функция getElementsByTagName.