Далее на странице...
Продолжаем перемещаться по иерархической структуре DOM-дерева. Здесь будут рассмотрены свойства nextSibling и previousSibling, которые позволяют обратиться к следующему и предыдущему узлам, расположенных на одном уровне.
Свойство nextSibling - Обращение к следующему узлу
Свойство nextSibling служит для обращения к следующему узлу, расположенному по иерархии на одном уровне с исходным узлом (элементом) веб-документа.
Далее будет продолжена работа с примером из предыдущих заметок, где три тега img являются дочерними элементами тега div.
<div id = "all_penguins">
<img src="img/peng_128.gif" id = "penguin_1" width="128" height="128" title="Крупный пингвин">
<img src="img/peng_64.gif" id = "penguin_2" width="64" height="64" title="Средний пингвин">
<img src="img/peng_32.gif" id = "penguin_3" width="32" height="32" title="Маленький пингвин">
</div>
<script type="text/javascript">
var element_start = document.getElementById('penguin_2'); /* возвращаем ссылку на 2-ой тег img, который выбираем по его id */
var element_next = element_start.nextSibling; /* обращаемся к следующему элементу - тегу img и результат заносим в переменную element_next */
document.write(element_next); /* выводим на экран переменную element_next */
</script>
Пример 1 - Свойство nextSibling - Следующий узел
[object Text]
В результате JavaScript выдал, что следующим узлом является текстовый объект. Хотя в коде мы видим тег img.
Вернемся к одной из прошлых заметок, где была рассмотрена аналогичная ситуация. Дело в том, что между тегами img есть пробелы, которые в DOM-дереве воспринимаются как текстовые узлы, а для JavaScript - это текстовые объекты.
Далее уберем пробелы между тегами img и посмотрим на результат.
<div id = "all_penguins">
<img src="img/peng_128.gif" id = "penguin_1" width="128" height="128" title="Крупный пингвин"><img src="img/peng_64.gif" id = "penguin_2" width="64" height="64" title="Средний пингвин"><img src="img/peng_32.gif" id = "penguin_3" width="32" height="32" title="Маленький пингвин">
</div>
<script type="text/javascript">
var element_start = document.getElementById('penguin_2'); /* возвращаем ссылку на 2-ой тег img, который выбираем по его id */
var element_next = element_start.nextSibling; /* обращаемся к следующему элементу - тегу img и результат заносим в переменную element_next */
document.write(element_next); /* выводим на экран переменную element_next */
</script>
Пример 2 - Свойство nextSibling - Следующий узел
[object HTMLImageElement]
Теперь все правильно: благодаря свойству nextSibling получилось выяснить, что следующим элементом после 2-го тега img является изображение.
Свойство previous - Обращение к предыдущему узлу
Свойство previousSibling служит для обращения к предыдущему узлу, расположенному по иерархии на одном уровне с исходным узлом (элементом) веб-документа.
<div id = "all_penguins">
<img src="img/peng_128.gif" id = "penguin_1" width="128" height="128" title="Крупный пингвин"><img src="img/peng_64.gif" id = "penguin_2" width="64" height="64" title="Средний пингвин"><img src="img/peng_32.gif" id = "penguin_3" width="32" height="32" title="Маленький пингвин">
</div>
<script type="text/javascript">
var element_start = document.getElementById('penguin_2'); /* возвращаем ссылку на 2-ой тег img, который выбираем по его id */
var element_previous = element_start.previousSibling; /* обращаемся к предыдущему элементу - тегу img и результат заносим в переменную element_previous */
document.write(element_previous.id); /* выводим на экран id предыдущего тега img */
</script>
В результате мы получили идентификатор id первого тега img, то есть при помощи свойства previousSibling получили доступ к предыдущему узлу, находящемуся на одном уровне с текущим узлом документа в иерархии дерева DOM.
