Интерфейс HTMLCollection

Расширения DOM для HTML

Спецификация HTML для DOM уровня 2 расширяет спецификацию ядра DOM для описания объектов, свойств и методов, специфичных для документов HTML.

Спецификация DOM HTML содержит следующие уточнения для HTML:

· интерфейс HTMLCollection;

· интерфейс HTMLDocument, являющийся производным от интерфейса Document;

· интерфейс HTMLElement, являющийся производным от интерфейса Element (этот интерфейс определяет операции, которые могут быть выполнены над элементом HTML);

· уточнения для всех элементов HTML, которые имеют атрибуты, отличные от атрибутов, определенных в интерфейсе HTMLElement (для таких элементов введены интерфейсы, производные от интерфейса HTMLElement).

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

Интерфейс HTMLCollection имеет свойство length, возвращающее длину коллекции (индексация коллекции начинается с нуля), а также два метода:

· item(индекс) – возвращает элемент коллекции (типа Node) по заданному индексу (индексация элементов в коллекции начинается с нуля);

· namedItem(значение-id-или-name) – возвращает элемент коллекции (типа Node) по заданному значению его атрибута id, или, если атрибут id для элемента не задан, по значению его атрибута name.

Пример 4.5.12. Использование интерфейса HTMLCollection:

Получение содержимого всех абзацев для документа HTML в примере 4.5.1 (с учетом изменений, произведенных в примерах 4.5.5, 4.5.7, 4.5.8, 4.5.9, 4.5.10 и 4.5.11):

// Получение коллекции всех абзацев в Web-странице

var pCollection = document.getElementsByTagName("p");

// Начальное значение строки вывода

collectionOutput = "Количество абзацев=" +

pCollection.length + ":";

// Вывод текстового содержимого

// элементов коллекции в цикле

for(i = 0; i < pCollection.length; i++)

// Добавление текстового содержимого текущего

// элемента коллекции в строку вывода

collectionOutput += "\n" + (i+1) + ". " +

pCollection.item(i).firstChild.nodeValue;

// Вывод строки

alert(collectionOutput);

// Получение элемента коллекции,

// у которого значение атрибута id равно "p1",

// с помощью метода namedItem()

alert("\n\nЭлемент p1='" +

pCollection.namedItem("p1").firstChild.nodeValue + "'");

// Получение текстового содержимого третьего

// элемента коллекции по его индексу

collectionOutput += "\nТретий элемент='" +

pCollection[2].firstChild.nodeValue + "'";

// Получение текстового содержимого элемента коллекции

// по его значению атрибута id

collectionOutput += "\nЭлемент imageLabel1='" +

pCollection["imageLabel1"].firstChild.nodeValue + "'";

// Вывод строки

alert(collectionOutput);

Вывод Web-страницы для этого фрагмента сценария будет иметь следующий вид:


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: