Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | ||
|
Навигацию по дереву документа можно начинать с любого узла, для которого мы знаем идентификатор, присваиваемый ему в качестве значения атрибута ID. Ссылку на такой узел можно получить с помощью метода getElementById(). Следующая строка кода присваивает переменной oList ссылку на список:
var oList = document.getElementById("components")
Приведем пример кода внутри тега BODY:
<!-- пример pr28 -->
<p id="myP">Hello, World!</p>
<script type="text/javascript">
alert(document.getElementById("myP").innerHTML);
//выведет на экран фразу Hello World!
var str = "";
str += document.getElementById("myP").nodeName + '\n';
str += document.getElementById("myP").nodeValue + '\n';
str += document.getElementById("myP").nodeType + '\n';
alert(str);//выведет «P null 1»
</script>
На экран вывелось nodevalue, равное null, потому что на самом деле внутри узла <p> есть еще один текстовый узел, в котором содержится искомый текст «Hello, World!». Для того чтобы получить доступ к этому значению, используется следующая строка:
document.getElementById("myP").childNodes[0].nodeValue;
Стартуя с некоторого узла, можно бродить по дереву, используя свойства узлов. Так, узлы-элементы и текстовые узлы имеют свойство parentNode, которое возвращает ссылку на родительский узел. Возьмем для примера узел (объект) oList. Ссылку на родительский элемент DIV этого узла можно получить следующий образом:
var oParent = oList.parentNode
Узлы, являющиеся потомками некоторого узла, входят в состав коллекции childNodes этого узла. (Узлы-атрибуты составляют отдельную коллекцию attributes) К каждому из них можно обращаться по индексу массива. Например, строка кода
var oItem1 = oList.childNodes[1]
присваивает переменнойoItem1ссылку на элемент<LI>CSS</LI> нашего списка. Именно этот элемент представлен в DOM как узел childNodes[1]узла oList. Первый (childNodes[0]) и последний элементы коллекции имеют специальные имена: firstChild и lastChild. Эти имена являются свойствами родительского узла. Каждый из элементов коллекции имеет свойства previousSibling и nextSibling. Эти свойства хранят ссылку на ближайщих братков элемента - предыдущий и последующий элементы коллекции (возвращают null, когда братков нет). Так, элементchildNodes[1]является свойством nextSibling элемента childNodes[0] и свойствомpreviousSibling элемента childNodes[2]. Используя эти свойства, мы можем получить ссылку на узел childNodes[1]любым из следующих способов:
oList.firstChild.nextSiblingoList
.childNodes[2].previousSibling
Ссылка на более удаленные узлы как по горизонтали, так и по вертикали дерева формируется путем слияния ссылок на ближайших родственников по стандартным правилам объектно-ориентированного программирования. Так,
oList.childNodes[1].firstChild
является ссылкой на текст"CSS"элемента <LI>CSS</LI> нашего списка.
На следующей диаграмме приведены имена всех ближайших родственников некоторого узла oNode.
Заметим, что все описанные выше свойства узлов (parentNode, firstChild, lastChild, nextSibling и previousSibling), необходимые для навигации по дереву документа, являются свойствами только для чтения. Помимо них, узлы имеют еще ряд свойств, которые мы сейчас опишем.
Чтобы проиллюстрировать иерархию узлов DOM, приведем пример:
<!-- пример 29: иерархия узлов DOM-->
<table>
<tr id="firstRow">
<td id="firstCell"></td>
<td id="currentNode" width="10">
<span id="spanNode">
text</span>
<p id="pNode">text</p>
</td>
<td id="lastCell"></td>
</tr>
</table>
<script type="text/javascript">
alert(document.getElementById("currentNode").parentNode.id);
//выведет на экран firstRow
alert(document.getElementById(currentNode").childNodes[0].id);
//выведет на экран spanNode
alert(document.getElementById("currentNode").firstChild.id);
//выведет на экран spanNode
alert(document.getElementById("currentNode").lastChild.id);
//выведет на экран pNode
alert(document.getElementById("currentNode").previousSibling.id);
//выведет на экран firstCell
alert(document.getElementById("currentNode").nextSibling.id);
//выведет на экран lastCell
alert(document.getElementById("currentNode").attributes["width"].
value);
//выведет на экран 10
alert(document.getElementById("currentNode").ownerDocument.
nodeName);
//выведет на экран #document
</script>
Помимо метода getElementById(), существует несколько других, облегчающих доступ к необходимым элементам документа. Метод getElementsByName() возвращает коллекцию элементов с определенным атрибутом name, а метод getElementsByTagName() возвращает коллекцию элементов (тегов) с одинаковым именем. Оба метода принадлежат объекту document.
Дата публикования: 2014-11-18; Прочитано: 374 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!