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

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

Статьи для сайтов!!!
getElementById - Выбор по id childNodes - Массив дочерних элементов parentNode - Родительский узел

Свойство childNodes - Массив дочерних элементов - Неопределенные значения undefined

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

Урок №5 childNodes - Массив дочерних элементов

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

В 3-ем и 4-ом уроках это темы были рассмотрены методы getElementsByTagName и getElementById, которые позволяют сделать выбор определенных элементов веб-страницы.

В javascript таких методов не много, и этом заключается один из недостатков этого скриптового языка.

Но есть jQuery, который в этом плане более богат, и который будет представлен для изучения позже.

Здесь будет рассмотрено свойство childNodes, которое похоже на методы getElementsByTagName и getElementById, так как тоже позволяет сделать выборку отдельных элементов страницы. Но работает иначе...

Свойство childNodes - Возвращает массив дочерних элементов

Свойство childNodes - Возвращает массив дочерних элементов

Свойство childNodes возвращает массив из дочерних элементов выбранного элемента страницы.

Родительский элемент выбирается по id при помощи метода getElementById.

Название свойства childNodes можно перевести, как «Дочерние узлы».

Допустим, что в теге div, у которого есть уникальный id-идентификатор, заключено три тега img.

Тег div является родителем по отношению к тегам img. А те в свою очередь как раз именуются «Дочерними узлами» или дочерними элементами (см. Узлы и принцип «наследования» DOM-дерева).

<div id = "all_penguins">

<img src="img/peng_128.gif" id = "penguin_1" width="128" height="128" alt="Крупный пингвин">

<img src="img/peng_64.gif" id = "penguin_2" width="64" height="64" alt="Средний пингвин">

<img src="img/peng_32.gif" id = "penguin_3" width="32" height="32" alt="Маленький пингвин">

</div>

Так вот свойство childNodes позволяет вернуть массив из тегов 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 div_all = document.getElementById('all_penguins'); /* возвращаем ссылку на тег div по id */

var all_img = div_all.childNodes; /* заносим в переменную all_img массив из дочерних элементов */

for(i = 0; i < all_img.length; i++)
{
document.write(all_img[i].title + "<br />"); /* выводим на экран значение атрибута title текущего тега img - он же является текущим объектом массива all_img, а title - свойством этого объекта */
}

</script>

Возвращаем массив из дочерних элементов

undefined
Крупный пингвин
undefined
Средний пингвин
undefined
Маленький пингвин
undefined

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

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

  • затем при помощи свойства childNodes возвращаем массив из дочерних элементов тега div (т.е из тегов img). Массив заносим в переменную all_img;
  • all_img - это массив;
  • all_img[i]- это текущий элемент массива - то есть тег img, который для  javascript является объектом;
  • title - свойство объекта (или атрибут тега img);
  • all_img[i].title - значение свойства title (или значение атрибута title).

- тег div - это массив all_img;

- теги img - это элементы массива с индексами 0, 1 и 2 соответственно (напомним, что каждый элемент массива имеет индекс);

- например, all_img[1] - это второй элемент массива, а значит - второй тег img;

- для javascript каждый тег img - это уже объект;

- атрибуты тега width и title - это свойства объекта;

- значения атрибутов "128" и "Крупный пингвин" - это значения свойств;

Посмотрим, как пример выше мог бы выглядеть с позиции javascript.

<script type="text/javascript">

var all_img = [

img_1 = {
width: 128,
title: "Крупный пингвин"
},

img_2 = {
width: 64,
title: "Средний пингвин"
},

img_3 = {
width: 32,
title: "Маленький пингвин"
}
]


for(i = 0; i < all_img.length; i++)
{
document.write(all_img[i].title + "<br />");}

</script>

Массив из объектов

Крупный пингвин
Средний пингвин
Маленький пингвин

Почему в варианте с тегами - javascript выдал нам неопределенные значения undefined ??? Об этом будет сказано далее...

В то время как в чистом javascript - при работе с массивом из объектов, мы не видим неопределенных значений undefined.

Инспектором DOM - Пробелы - undefined

Инспектором DOM - Пробелы - undefined

Для более четкого понимания того, почему ранее javascript выдал неопределенные значения undefined, и других подобных моментов, можно пользоваться инспектором DOM для firefox (это одно из дополнений браузера).

И мы увидим, что в теге div помимо изображений есть какой-то текст, который, в итоге, воспринимается javascript-ом как неопределенные значения undefined.

Откуда берется этот текст, хотя явно между тегами его нет???

Дело в том, что между тегом div и img (а также между тегами img) есть пробелы. Как раз они и воспринимаются как текстовые узлы в дереве DOM, а для javascript это неопределенные значения undefined.

Если пробелы между тегами убрать, как сделано в примере ниже, то ситуация измениться:

<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 div_all = document.getElementById('all_penguins'); /* возвращаем ссылку на тег div по id */

var all_img = div_all.childNodes; /* заносим в переменную all_img массив из дочерних элементов */

for(i = 0; i < all_img.length; i++)
{
document.write(all_img[i].title + "<br />"); /* выводим на экран значение атрибута title текущего тега img - он же является текущим объектом массива all_img, а title - свойством этого объекта */
}

</script>

Возвращаем массив из дочерних элементов - undefined

Крупный пингвин
Средний пингвин
Маленький пингвин

Описанная ситуация с пробелами в html-коде и значениями undefined для javascript, конечно же, является одним из недостатков этого языка.

Главная Изучаем JavaScript childNodes - Массив дочерних элементов parentNode - Родительский узел

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

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

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

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

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