Коллекции и подчиненные объекты объекта document

Обращение к элементам страницы

Объект document предоставляет доступ к отдельным элементам Web-страницы. Если элемент страницы имеет уникальное имя, то можно использовать прямое обращение как к отдельному объекту:

image1.outerHTML;

В остальных случаях обращение происходит через коллекции. Коллекция – это объект, который используется для хранения других объектов и отличается от ассоциативного массива объектов наличием собственных свойств и методов.

Рассмотрим, например, коллекцию images, которую включает в себя объект document. Получить доступ к отдельным ее элементам можно по порядковому номеру или ключу.

document.images.item(1);

document.images.item("iamge1") ;

Индекс элемента коллекции помещается не в квадратных, а в круглых скобках, потому что он является аргументом метода item(), поддерживаемого всеми коллекциями. Имя этого метода можно опускать.

document.images(1);

document.images("image1");

Все элементы Web-страницы нумеруются в порядке их появления в HTML-коде. А некоторым элементам атрибутом ID задаются уникальные имена.

<img src="img1.gif" id="image1">

<script type="text/javascript">

var someImage = document.images("image1");

</script>

Коллекция all представляет все элементы Web-страницы. К элементам этой коллекции можно обращаться по номеру в порядке появления в HTML-коде или по имени.

document.all(8); document.all("iamge1")

Атрибут ID требует уникальности имен всех элементов, но только формально. Реально же на странице могут встретиться два или более элемента с одинаковыми именами. В таком случае нужно будет указать второй индекс:

document.all("image1", 2)

Иначе document.all("image1") вернет коллекцию всех изображений с именем image1. Все коллекции имеют свойство length - количество элементов коллекции. Надо отметить, что элементы коллекции нумеруются с нуля.

Объект document содержит внутри себя множество подчиненных объектов и коллекций. В следующей таблице приведены описания соответствующих объектов и коллекций.

Свойство Описание
all Все элементы страницы, включая теги <html>, <head>, <title> и <body>.
anchors Все "якоря" страницы
embeds Все расширения, внедренные в страницу.
forms Все Web-формы.
images Все изображения на странице.
layers Все слои страницы.
links Все гиперссылки на странице.
location Объект location для данного документа.
scripts Все скрипты, внедренные в страницу.
selection Объект selection, представляющий выделенный пользователем текст.
styleSheets Все таблицы стилей встроенные или привязанные к странице.

Коллекция all имеет дополнительный метод tags, позволяющий фильтровать элементы коллекции по их тегу. В качестве параметра метод принимает строковое значение тега.

document.all.tags("H1")

Данное выражение вернет ссылку на коллекцию, содержащую только заголовки первого уровня. Такой же метод поддерживает коллекция links. В следующем примере используется массив all, содержащий все элементы документа для вывода списка используемых на странице тегов.

<!--пример pr24: список используемых на странице тегов -->

<html> <head>

<title> Список используемых на странице тегов </title>

<script type="text/javascript">

function findtags()

{var tag;

var tags="страница содержит следующие теги";

for(i=0;i<document.all.length;i++)

{tag=document.all(i).tagName;

tags=tags+" \r"+tag;}

alert(tags);

return tags;}

</script>

</head>

<body onload="findtags()">

<h2 >Вывод списка используемых на

странице тегов в диалоговое окно </h2>

</body> </html>

Вывод списка используемых на странице тегов в диалоговое окно

страница содержит следующие теги

HTML

HEAD

TITLE

SCRIPT

BODY

H2

Метод getElementByName возвращает коллекцию элементов со значением атрубута NAME, переданным в качестве параметра. Атрибут NAME применяется в современном HTML редко. Метод getElementByTagName возвращает коллекцию элементов, созданных посредством тега, переданного в качестве параметра. Пример:

document.getElementByName("someimage")

document.getElementByTagName("H1")

Наши рекомендации