Далее на странице...
В прошлой заметке было рассмотрено свойство childNodes, которое возвращает массив из дочерних элементов.
Здесь будет рассмотрено свойство parentNode, которое также позволяет работать с дочерними и родительскими узлами веб-документа.
Свойство parentNode - Родительский узел текущего элемента
Свойство parentNode позволяет обратиться к родительскому узлу текущего элемента страницы.
Название свойства parentNode переводится как «Родительский узел».
Далее рассмотрим пример, в котором текущий элемент (подразумевается, что он чей-то дочерний) выбирается по id при помощи метода getElementById. Нужно обратиться к его родительскому элементу.
Для примера возьмем код из прошлой заметки, где три тега 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_child = document.getElementById('penguin_1'); /* возвращаем ссылку на один из тегов img по его id */
var element_parent = element_child.parentNode; /* обращаемся к родительскому элементу тега img и результат заносим в переменную element_parent */
document.write(element_parent.id);
/* выводим на экран идентификатор id родительского */
</script>
parentNode - Обращаемся к родительскому элементу
all_penguins
Комментарии к примеру.
-
сначала при помощи метода getElementById был выбран тег img по его идентификатору;
-
затем при помощи свойства parentNode обращаемся к родительскому элементу тега img - в данном случае это тег div. Результат занесен в переменную element_parent;
-
для javascript переменная element_parent - это объект (то есть тег div - это объект, следовательно, его атрибуты - это свойства объекта);
-
далее выводим на экран значение свойства id объекта element_parent.
