Содержание
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-navigation.
DOM позволяет делать что угодно с HTML-элементом и его содержимым, но для этого нужно сначала нужный элемент получить.
Доступ к DOM начинается с объекта document . Из него можно добраться до любых узлов.
Так выглядят основные ссылки, по которым можно переходить между узлами DOM:
Посмотрим на них повнимательнее.
Сверху documentElement и body
Самые верхние элементы дерева доступны напрямую из document .
= document.documentElement Первая точка входа – document.documentElement . Это свойство ссылается на DOM-объект для тега . = document.body Вторая точка входа – document.body , который соответствует тегу .
В современных браузерах (кроме IE8-) также есть document.head – прямая ссылка на
Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.
В частности, если скрипт находится в , то в нём недоступен document.body .
Поэтому в следующем примере первый alert выведет null :
В мире DOM в качестве значения, обозначающего «нет такого элемента» или «узел не найден», используется не undefined , а null .
Дети: childNodes, firstChild, lastChild
Здесь и далее мы будем использовать два принципиально разных термина.
- Дочерние элементы (или дети) – элементы, которые лежат непосредственно внутри данного. Например, внутри обычно лежат и .
- Потомки – все элементы, которые лежат внутри данного, вместе с их детьми, детьми их детей и так далее. То есть, всё поддерево DOM.
Псевдо-массив childNodes хранит все дочерние элементы, включая текстовые.
Пример ниже последовательно выведет дочерние элементы document.body :
Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент .
Урок №5 childNodes — Массив дочерних элементов
Количество просмотров : 1658
В 3-ем и 4-ом уроках это темы были рассмотрены методы getElementsByTagName и getElementById , которые позволяют сделать выбор определенных элементов веб-страницы.
В javascript таких методов не много, и этом заключается один из недостатков этого скриптового языка.
Но есть jQuery , который в этом плане более богат, и который будет представлен для изучения позже.
Здесь будет рассмотрено свойство childNodes , которое похоже на методы getElementsByTagName и getElementById, так как тоже позволяет сделать выборку отдельных элементов страницы. Но работает иначе.
Свойство childNodes — Возвращает массив дочерних элементов
Свойство childNodes возвращает массив из дочерних элементов выбранного элемента страницы.
Родительский элемент выбирается по id при помощи метода getElementById.
Название свойства childNodes можно перевести, как «Дочерние узлы» .
Допустим, что в теге div , у которого есть уникальный id -идентификатор, заключено три тега img .
Тег div является родителем по отношению к тегам img . А те в свою очередь как раз именуются «Дочерними узлами » или дочерними элементами (см. Узлы и принцип «наследования» DOM-дерева).
"img/peng_128.gif" > "penguin_1" w > "128" height= "128" alt= "Крупный пингвин" >
"img/peng_64.gif" > "penguin_2" w > "64" height= "64" alt= "Средний пингвин" >
"img/peng_32.gif" > "penguin_3" w > "32" height= "32" alt= "Маленький пингвин" >
Так вот свойство childNodes позволяет вернуть массив из тегов img , как дочерних элементов тега div .
"img/peng_128.gif" > "penguin_1" w > "128" height= "128" title= "Крупный пингвин" >
"img/peng_64.gif" > "penguin_2" w > "64" height= "64" title= "Средний пингвин" >
"img/peng_32.gif" > "penguin_3" w > "32" height= "32" title= "Маленький пингвин" >
undefined
Крупный пингвин
undefined
Средний пингвин
undefined
Маленький пингвин
undefined
Комментарии к примеру.
-
сначала при помощи метода getElementById выбираем тег div по его идентификатору;
— тег div — это массив all_img ;
— теги img — это элементы массива с индексами 0 , 1 и 2 соответственно (напомним, что каждый элемент массива имеет индекс);
— например, all_img[ 1 ] — это второй элемент массива, а значит — второй тег img ;
— для javascript каждый тег img — это уже объект;
— атрибуты тега width и title — это свойства объекта;
— значения атрибутов "128" и "Крупный пингвин" — это значения свойств;
Посмотрим, как пример выше мог бы выглядеть с позиции javascript .
Крупный пингвин
Средний пингвин
Маленький пингвин
Почему в варианте с тегами — javascript выдал нам неопределенные значения undefined . Об этом будет сказано далее.
В то время как в чистом javascript — при работе с массивом из объектов, мы не видим неопределенных значений undefined.
Инспектором DOM — Пробелы — undefined
Для более четкого понимания того, почему ранее javascript выдал неопределенные значения undefined , и других подобных моментов, можно пользоваться инспектором DOM для firefox (это одно из дополнений браузера).
И мы увидим, что в теге div помимо изображений есть какой-то текст, который, в итоге, воспринимается javascript -ом как неопределенные значения undefined.
Откуда берется этот текст, хотя явно между тегами его нет.
Дело в том, что между тегом div и img (а также между тегами img ) есть пробелы . Как раз они и воспринимаются как текстовые узлы в дереве DOM, а для javascript это неопределенные значения undefined.
Если пробелы между тегами убрать, как сделано в примере ниже, то ситуация измениться:
Крупный пингвин
Средний пингвин
Маленький пингвин
Описанная ситуация с пробелами в html -коде и значениями undefined для javascript , конечно же, является одним из недостатков этого языка.
Ваши комментарии к уроку:
Комментариев нет.
почему это не работает в Firefox я пытаюсь выбрать категорию, а затем сделать подрубрику видны.
3 ответов
ULs не имеют атрибута name, но вы можете ссылаться на ul по имени тега.
попробуйте заменить строку 3 в вашем скрипте следующим:
Я бы предложил сделать что-то подобное:
хотя вышеуказанное полагается на использование class , а не равна sub .
что касается того, почему ваша исходная версия "не работала" (не, я должен добавить, особенно полезное описание проблемы), все, что я могу предложить, это то, что в Chromium консоль JavaScript сообщила, что:
Uncaught TypeError: Объект # не имеет метода ‘getElementsByName’.
один из подходов к работе с ограничениями старой семьи IE-использовать пользовательскую функцию для эмуляции getElementsByClassName() , хотя и грубо:
Загрузка...
