Роботландский Университет © А.А.Дуванов

СПРАВОЧНИК

коллекции объекта document

Кроме рассмотренных свойств и методов объект document имеет еще коллекции. Коллекция — это массив ссылок на однородные объекты, каждый из которых имеет одинаковые методы и свойства.

Индексация традиционно начинается с нуля. В качестве индекса можно использовать имя объекта, если оно задано в соответствующем теге при помощи атрибута name (или id).

Например, доступ к объекту, построенному браузером для тега

<IMG name=pic...>

может быть получен при помощи конструкции document.images[0], если это первая картинка в HTML-файле или при помощи конструкции document.images["pic"] независимо от порядкового номера картинки. Последний способ, конечно удобнее. Допускается равнозначная запись document.images.pic.

Приведенный пример иллюстрирует использование коллекции images — в ней собраны объекты, построенные браузером для всех картинок, задаваемых в документе тегами IMG.

У каждой коллекции (как единого целого) существует свойство length — ее длина. Например, доступ к свойству src объекта, построенного для первого тега IMG можно задать при помощи конструкции document.images[0].src. Для последнего тега IMG:

document.images[document.images.length-1].src.

В общем случае индексом коллекции может быть выражение. В приведенном ниже примере в переменную widthpic будет записана ширина картинки, заданной тегом IMG c именем mypic:

var ind = "pic";
var widthpic = document.images["my"+ind].width;

Ниже приводится описание четырех наиболее употребительных коллекций, которые принадлежат объекту document.

коллекция описание

all
IE

Коллекция всех тегов в теле документа.

Эта картинка задается в HTML-коде тегом

<IMG name=pic0 src=./pic/isp1a0.gif
     border=0 alt=""  width=89 height=72>

При помощи следующих скрипта и формы, можно менять экранное изображение:

<SCRIPT language=JavaScript>
<!--
  var img = new Array (new Image(),
                       new Image());
  img[0].src="./pic/isp1a0.gif";
  img[1].src="./pic/isp2a0.gif";
  var ind=1;
  function ChangeImg()
  {
    document.all["pic0"].src=img[ind].src;
    ind=1-ind;
  }
//-->
</SCRIPT>
<FORM>
  <INPUT type=button value=Изменить
         onclick="ChangeImg()">
</FORM>

forms
IE,NN

Коллекция всех форм на странице.

Эта коллекция сама содержит коллекцию elements — список элементов данной формы (теги INPUT, SELECT, TEXTAREA).

Для доступа к форме с именем forma используется конструкция document.forms["forma"]. Для доступа к элементу формы с именем element — конструкция document.forms["forma"].elements["element"].

Это поле

задается в HTML-формой:

<FORM name=f>
  <INPUT name=t type=text
         value="Книги про Незнайку" size=40>
</FORM>

При помощи следующих скрипта и формы, можно менять содержимое поля:

<SCRIPT language=JavaScript>
<!--
 var titl = new Array(
  "Приключения Незнайки и его друзей",
  "Незнайка в солнечном городе",
  "Незнайка на Луне");
 var ind=0;
 function ChangeTitl()
 {
  document.forms["f"].elements["t"].value=
    titl[ind];
  ind = ind < 2 ? ++ind : 0;
 }
//-->
</SCRIPT>
<FORM>
  <INPUT type=button value=Изменить
         onclick="ChangeTitl()">
</FORM>

images
IE,NN

Коллекция всех картинок на странице.

Эта картинка задается в HTML-коде тегом

<IMG name=pic1 src=./pic/isp1a0.gif
     border=0 alt=""  width=89 height=72>

При помощи следующих скрипта и формы, можно менять экранное изображение:

<SCRIPT language=JavaScript>
<!--
  var img = new Array (new Image(),
                       new Image());
  img[0].src="./pic/isp1a0.gif";
  img[1].src="./pic/isp2a0.gif";
  var ind=1;
  function ChangeImg()
  {
    document.images["pic1"].src=img[ind].src;
    ind=1-ind;
  }
//-->
</SCRIPT>
<FORM>
  <INPUT type=button value=Изменить
         onclick="ChangeImg()">
</FORM>

links
IE,NN

Коллекция всех ссылок на странице.

Список всех ссылок на этой странице можно получить при помощи кода:

<SCRIPT language=JavaScript>
<!--
function LinksList()
{
 var str = "Список ссылок этой страницы:\n ";
 for(var i=0; i<document.links.length; i++)
  str +=document.links[i].href+"\n";
 alert(str);
}
//-->
</SCRIPT>
<FORM>
  <INPUT type=button value="Ссылки"
         onclick="LinksList()">
</FORM>