Лекция: Коллекции и подчиненные объекты объекта 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»)