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

Далее на странице...

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

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

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

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

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

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

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

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

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

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

Далее рассмотрим пример того, как работает свойство childNodes в JavaScript.

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

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

Фрагмент кода

</div>

Так вот свойство childNodes позволяет вернуть массив из тегов img, как дочерних элементов тега div.

Фрагмент кода

</div>

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 выдал нам неопределенные значения undefined ??? Об этом будет сказано далее.

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

Фрагмент кода

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>

Результат

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

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

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

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

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

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

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

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