Добавляем...


Доступ к элементам
При движении по дереву документа HTML можно начинать как с вершины дерева, так и с любого элемента. Мы начнем с конкретного элемента, поскольку в этом случае упрощается понимание процесса. Обратите внимание на то, что в предлагаемом ниже простом документе дескриптор <p> уникальным образом идентифицируется с помощью присвоения значения "pi" атрибуту id:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitionalfatd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>npoBepKa DOM</title>
</head>
<body>
<p id="pl" align="center">Это абзац <em>текста</em> для примера</p>
</body>
</html>

Если абзац идентифицирован, доступ к соответствующему элементу можно получить с помощью метода getElementById () объекта Document, например document. getElementById ('pi'). Этот метод возвращает объект Element DOM. Возвращенный объект можно использовать для того, чтобы выяснить, какой тип дескриптора он представляет.

var currentElement = document.getElementById('pl');
var msg = "Имя узла: "+currentElement.nodeName+"\n";
msg += "Тип узла: "+currentElement.nodeType+"\n";
msg += "Значение: "+currentElement.nodeValue+"\n";
alert(msg);

Получим результат: Имя узла: P    Тип узла: 1    Значение: null
Как видите, типом элемента, содержащегося в nodeName, является Р, что соответствует элементу XHTML, определяющему абзац. Значением типа узла (nodeType) является 1, что, согласно табл. , соответствует объекту Element. Однако значением nodeValue оказывается null. Вы, возможно, ожидали увидеть значение "Это абзац текста для примера" или подобную строку с дескриптором <еm>, но на самом деле элемент не имеет значения. Элементы определяют структуру дерева, а представляющие интерес значения содержатся в текстовых узлах. Текстовые узлы являются дочерними для других узлов, поэтому, чтобы получить доступ к тому, что содержится в рамках дескриптора <р>, необходимо рассмотреть дочерние элементы данного узла. Как это сделать, мы выясним чуть позже, а сейчас давайте рассмотрим свойства Node, доступные для любого дескриптора (соответствующие описания представлены в таблице).

Свойство объекта Node Описание
nodeName Содержит имя узла
nodeValue Содержит имеющееся в узле значение. Применимо, как правило, только к узлам текста
nodeType Хранит числовое значение, соответствующее типу узла
parentNode Ссылка на родительский узел данного объекта, если таковой существует
childNodes Обеспечивает доступ к списку дочерних узлов
firstChild Ссылка на первый дочерний узел данного элемента, осли таковые существуют
lastChild Ссылка на последний дочерний узел данного элемента, если таковые существуют
previousSibling Ссылка на предыдущий сестринский узел данного узла (*когда родительский узел имеет несколько дочерних)
nextSibling Ссылка на следующий сестринский узел данного узла (когда родительский узел имеет несколько дочерних)
attributes Список атрибутов данного элемента
ownerDocument Указывает HTML-объект Document, в котором содержится данный элемент

Используя указанные свойства, очень легко организовать " движение" по древовидной стуктуре, о которой шла реч выше.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика