|
Web-программирование: «Java Script(JS): Коллекции DOM-объектов. |
|
|
|
Автор megabax
|
|
21.06.2013 г. |
Урок 13. Управление шрифтами в CSS
New Page 1
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.
|
|
Последнее обновление ( 29.06.2013 г. )
|
