Коллекции

all	Массив всех элементов на странице
anchors	Все якоря на странице (элементы <a>).
forms	Содержит все формы, размещённые на странице.
applets	Содержит все апплеты, размещённые на странице.
images	Содержит все изображения, размещённые на странице.
layers	Содержит все слои, размещённые на странице.
links	Содержит все ссылки, размещённые на странице.
scripts	Содержит все скрипты, размещённые на странице.
styleSheets	Содержит все каскадные таблицы стилей, размещённые на странице.

Коллекция all – это все созданные HTML-дескрипторы (теги) на странице, в порядке их создания. Элементы нумеруются с нуля, для обращения к элементам используются круглые () скобки.

Основные свойстваэлементов из коллекции all:

className – имя класса

clientWidth – ширина элемента в пикселах

height – если в теге задан соответствующий атрибут, то это свойство содержит его значение, в противном случае не определено

id – идентификатор объекта, имеется у любого элемента

tagName – имя соответствующего тега

width - если в теге задан соответствующий атрибут, то это свойство содержит его значение, в противном случае не определено

children – коллекция элементов, являющихся прямыми потомками данного элемента (например для тега <html> прямыми потомками будут теги <head> и <body>)

Таким образом мы можем добраться до элементов нашей страницы и изменять их свойства (положение, размер и.т.д.). Для этого используются именованные свойства объектов в виде ассоциативных массивов (индексами являются строковые переменные).

length – количество элементов в коллекции.

item - метод, возвращающий элемент коллекции с указанным индексом.

Рассмотрим DOM на примере страницы

Примеры

1.Рассмотрим HTML код самой страницы:

<html>

<body>

<img src="pic1.gif" name="image1">

<form name="Myform">

имя: <input type="text" name="xname" value="">

<br>

email:<input type="text" name="email" value="">

<br><br>

<input type="button" name="myButton" value="Нажмите">

</form>

<img src="pic2.gif" name="image2">

<a href="www.my.ru">ссылка</a>

</body>

</html>

Теперь к любому элементу страницы можно обращаться через объект document, например:

document.forms(0).elements(2) – даст нам кнопку.

ПРИМЕР Js32a

Получить текст, который пользователь ввел в поле ввода можно, используя свойство value элемента ввода: