Расширения 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-страницы для этого фрагмента сценария будет иметь следующий вид: