Программный интерфейс HTML DOM
В рамках DOM модели HTML можно рассматривать как множество узловых объектов. Доступ к ним осуществляется с помощью JavaScript или других языков программирования. Программный интерфейс DOM включает в себя набор стандартных свойств и методов.
Свойства представляют некоторые сущности (например, <h1>), а методы - действия над ними (например, добавить <a>).
К типичным свойствам DOM относятся следующие:
- x.innerHTML – внутреннее текстовое значение HTML элемента x;
- x. nodeName – имя x;
- x.nodeValue – значение x;
- x.parentNode – родительский узел для x;
- x.childNodes – дочерний узел для x;
- x.attributes – узлы атрибутов x.
Узловой объект, соответствующий HTML элементу поддерживает следующие методы:
- x.getElementById(id) – получить элемент с указанным id;
- x.getElementsByTagName(name) – получить все элементы с указанным именем тэга (name);
- x.appendChild(node) – вставить дочерний узел для x;
- x.removeChild(node) – удалить дочерний узел для x.
Пример 3.
Для получения текста из элемента <p> со значением атрибута id "demo" в HTML документе можно использовать следующий код:
txt = document.getElementById("demo").innerHTMLТот же самый результат может быть получен по-другому:
txt=document.getElementById("demo").childNodes[0].nodeValueВ рамках DOM возможны 3 способа доступа к узлам:
- С помощью метода getElementById(ID). При этом возвращается элемент с указанным ID.
- С помощью метода getElementsByTagName(name). При этом возвращаются все узлы с указанным именем тэга (в виде индексированного списка). Первый элемент в списке имеет нулевой индекс.
- Путем перемещения по дереву с использованием отношений между узлами.
Для определения длины списка узлов используется свойство length.
x = document.getElementsByTagName("p");for (i = 0; i < x.length; i++) { document.write(x[i].innerHTML); document.write("<br/>"); }Пример 6.4. (html, txt)
В данном примере внутрь HTML документа вставляется в виде списка текстовое содержимое всех элементов соответствующих тэгу <p>.
Для навигации по дереву в ближайших окрестностях текущего узла можно использовать следующие свойства:
- parentNode;
- firstChild;
- lastChild.
Для непосредственного доступа к тэгам можно использовать 2 специальных свойства:
- document.documentElement – для доступа к корневому узлу документа;
- document.body – для доступа к тэгу <body>.
Свойства узлов
В HTML DOM каждый узел является объектом, который может иметь методы (функции) и свойства. Наиболее важными являются следующие свойства:
- nodeName;
- nodeValue;
- nodeType.
Свойство nodeName указывает на имя узла. Это свойство имеет следующие особенности:
- Свойство nodeName предназначено только для чтения;
- Свойство nodeName узла элемента точно соответствует имени тэга;
- Свойство nodeName узла атрибута соответствует имени атрибута;
- Свойство nodeName текстового узла всегда равно #text
- Свойство nodeName узла документа всегда равно #document
Замечание: nodeName всегда содержит имя тэга HTML элемента в верхнем регистре.
Свойство nodeValue указывает на значение узла. Это свойство имеет следующие особенности:
- Свойство nodeValue узла элемента не определено;
- Свойство nodeValue текстового узла указывает на сам текст;
- Свойство nodeValue узла атрибута указывает на значение атрибута.
Свойство nodeType возвращает тип узла. Это свойство предназначено только для чтения:
Наиболее важными типами узлов являются следующие:
| Тип элемента | Тип узла |
| Element | |
| Attribute | |
| Text | |
| Comment | |
| Document |
Дата добавления: 2015-12-29; просмотров: 628;