Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
childNodes - Массив дочерних элементов parentNode - Родительский узел nextSibling и previousSibling

Свойство parentNode - Обращение к родительскому элементу

JavaScript - Практическое применение

Урок №6 parentNode - Родительский узел

Количество просмотров: 303

В прошлом уроке было рассмотрено свойство childNodes, которое возвращает массив из дочерних элементов.

Здесь будет рассмотрено свойство parentNode, которое также позволяет работать с дочерними и родительскими узлами веб-документа.

Свойство 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_parrent */

document.write(element_parent.id); /* выводим на экран идентификатор id родительского элемента */

</script>

Комментарии к примеру...

  • сначала при помощи метода getElementById был выбран тег img по его идентификатору;

  • затем при помощи свойства parentNode обращаемся к родительскому элементу тега img - в данном случае это тег div. Результат занесен в переменную element_parent;
  • для javascript переменная element_parent - это объект (т.е. тег div - это объект, следовательно, его атрибуты - это свойства объекта);
  • далее выводим на экран значение свойства id объекта element_parent.

Главная Изучаем JavaScript parentNode - Родительский узел nextSibling и previousSibling

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru