Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

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

Статьи для сайтов!!!
parentNode - Родительский узел nextSibling и previousSibling innerText и innerHTML

Свойства nextSibling и previousSibling - Следующий и предыдущий узлы

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

Урок №7 nextSibling и previousSibling

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

Продолжаем перемещаться по иерархической структуре DOM-дерева. Здесь будут рассмотрены свойства nextSibling и previousSibling, которые позволяют обратиться к следующему и предыдущему узлам, расположенных на одном уровне.

Свойство nextSibling - Следующий узел на том же уровне

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

В результате 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>

Теперь все правильно: благодаря свойству nextSibling мы выяснили, что следующим элементом после 2-го тега img является изображение.

Свойство previous - Предыдущий узел на том же уровне

Свойство 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.

Главная Изучаем JavaScript nextSibling и previousSibling innerText и innerHTML

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

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

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

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

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