Здесь вы сможете побродить по DOM, посмотреть все элементы и проверить, все ли вы понимаете правильно.
Привет, отважные путешественники!
Вам предоставляется возможность побродить в чудесном мире DOM.
Путь начинается с document.documentElement (он же - тег <HTML>).
Ниже находится документ и кнопки управления. Сверяйте свои движения с картой (документом).
Все может оказаться совсем не так просто. Как правило, уже первые движения вызывают вопрос "где я нахожусь?". Чтобы на него ответить - посмотрите на "Текущий узел" и сверьте его с HTML.
Удачи и новых открытий!
Спасибо, по DOM'у побродил. Но вот маленькая незадача...
Ну никак, никак не пойму, как пользоваться формочкой под текстом «Получить:»! Пожалейте дурака, научите пользоваться :'(
UPD: допёр. просто переходим на нужный узел DOM-дерева и вводим название свойства или атрибута. Получаем значение. Хоспади, какой же я тупой >_<
хм.. а вы не задумывались написать утилиту с подобным смыслом на php например, можно еще сделать чтобы отображалось не только содержание документа но и само дерево.. я думаю получилось бы потрясно)
Один вопрос:
когда захожу во внутрь HEAD, двигаюсь к последнему соседу и получаю Node.ELEMENT_NODE
tagName: STYLE. Откуда он берется? В коде хтмл такого не вижу.
Помните эту статью: Введение. DOM в примерах.? Так вот, это своеобразный тренажер для ориентировки в структуре html-документа( так понял это я). Если Вы еще раз прочтете ту статью, то вероятно поймете, что именно, Вы имеете возможность потренировать. На всякий случай, возьму на себя смелость еще раз попытаться это объяснить ( я ведь сам еще только начал изучать js ).
И так, предположим, что у Вас за окном растет дерево. Часть этого дерева находится в почве( а именно корень и часть ствола ). Так вот, почва - это окно браузера, в котором открыт какой-то html-документ ( дерево ). Другими словами - растет дерево. Корень этого дерева имеет довольно не простою структуру. Этот корень делится на 2. Первая часть этого корня называется DOCUMENT ( в нашем случае ), а вторая HTML. У корня под названием DOCUMENT нет никаких явных ответвлений. А вот у корня HTML таковые имеются. Их два:
html-тег HEAD;
html-тег BODY;
Помните я выше писал, что в почве ( окно браузера ) находится корень ( DOCUMENT и HTML ) и часть ствола ( часть самого дерева ). Так вот, та часть ствола под землей - это и есть тег HEAD( потому, что его не видно, если не копать землю, так же как и невидно содержимого между тегами HAED на самой странице( если не лезть в исходник ) ). У тега HEAD есть свои ответвления ( простой текст ( типа этого ) и такие теги как TITLE, META, LINK, SCRIPT, и возможно некоторые другие( я просто больше не знаю ) ). Эти ответвления и составляют мини структуру части дерева под землей.
Далее идет видимая часть дерева ( тег BODY ). У этой части дерева может быть ооочень много веточек ( в качестве примера, помимо текста, можно взять тег DIV или TABLE ), а у этих веточек могут быть ещё веточки ( [div][div]Текст[/div][/div], к примеру ) и так далее... Что еще сказать можно об этом? Ммм... да наверно все. Теперь перейдем к самому DOM'у .
DOM позволяет управлять структурой этого дерева. Добавлять веточки ( как бы тупо это не читалось ), срывать веточки или листочки, изменять их внешний вид. Но, что бы это делать, нам необходимо указать какую именно веточку мы хотим изменить. Что бы это сделать ( указать ) в DOM имеются следующие "причиндалы": parentNode - позволяет обратиться к родителю текущего элемента( самая верхняя кнопочка данного тренажера ); previousSibling - перейти к предыдущему элементу( левому ). В тренажере эта кнопочка вторая сверху с левой стороны. nextSibling - перейти к следующему элементу ( правому ). В тренажере эта кнопочка вторая сверху с правой стороны. firstChild - перейти к первому дочернему элементу ( левому ). В тренажере эта кнопочка третья сверху с левой стороны. lastChild - перейти к последнему дочернему элементу ( правому ). В тренажере эта кнопочка третья сверху с правой стороны. Пример:
[DIV][h3]Текст[/h3][SPAN][/SPAN][/DIV]
Теперь, имея более простой ( даже примитивный ) пример, можно посмотреть на примере, как это работает:
Родителем ( главным элементом ), в данной ситуации является тег DIV. Что бы к нему обратиться, скажем( напишем ), из h3, достаточно нажать на кнопочку parentNode. А если мы находимся в SPAN? Точно так же. h3 и SPAN это дети ( дочерние элементы ( firstChild и lastChild соответственно ) тега DIV ). Теперь попробуем обратиться к h3 из DIV. Для этого, как писалось выше, нужно кликнуть по кнопочке с надписью firstChild ( т.к. h3 это первый ( крайний с лева ) элемент в DIV'е ). А что бы попасть из DIV в SPAN нужно клацнуть по кнопке с надписью lastChild. Что бы из h3 попасть в SPAN достаточно кликнуть по nextSibling, а обратно можно попасть кликнув по кнопочке previousSibling. А как же нам попасть к "Текст", скажем ( напишем ), из... h3? Очень просто. Нужно кликнуть по кнопочке firstChild, т.к. "Текст" - это первый ( и единственный ) элемент в теге h3. А как бы попасть из SPAN туда же ( в "Текст" )? Тут уже сложнее... Нужно клацнуть 2 раза по кнопкам. Первый раз по previousSibling, что бы попасть в h3, а потом все по той же firstChild ( хотя, наверно можно и по lastChild, разницы я не вижу ). Теперь попробуем из DIV попасть в SPAN. Подобный механизм действий уже описывался выше, но, как говорят, повторение - мать учения! Просто бацаем по lastChild и всё на этом... Точка.
Объяснение очень хорошее и доступное, но не совсем точное. Корень дерева не состоит из двух частей (DOCUMENT и HTML). HTML является дочерним элементом DOCUMENT'а. Иначе было бы невозможно использовать document.getElementById() и другие функции поиска элементов (потому что в DOCUMENT ничего бы не было). Также это можно проверить, выполнив код (в опере или файрфоксе):
alert(document.firstChild.nextSibling.tagName);
В таком случае я бы сказал так: корень состоит из трёх частей: нижняя - это WINDOW. Далее идут DOCUMENT и HTML. А от HTML (верхней части корня) вверх идёт основной ствол - BODY и небольшой - HEAD, каждый из которых имеет свои ветви. Только у небольшого ствола (HEAD) их обычно намного меньше.
Вот именно это я имел ввиду:) Только я не согласен с Вами. DOCUMENT( DOCTYPE ) - это тег... Только немного специфический:) Он так же является частью документа.
Отличная штука. Только кое-чего не понятно, скажм, firstChild тега
<head>
по моему разумению это
<meta>
, а оказывается, что это не так, первым ребенком является текст (пробельные символы). Объясните неразумному, откуда они, это табуляция учитывается? Т.е., если бы скажем вместо
заметил небольшую ошибку, а именно комментарии html по представленному коду находятся до закрывающего тега body, а в "игрушке" комментарии идут после body.
Скажите,плиз, что нужно ставить в поле "получить". Поставила Style, нажала кнопку, вышло окно border:1 px solid green, но в этом коде нигде нет зеленой рамочки. наоборот есть красный цвет. Подставляла в это поле class, body, ul, html везде дает undefined.
Ходила по кнопочкам, попадала на div, title,meta, head, body,html,ul , li .
Получается, что на одну и туже кнопочку нажимала 2 раза подряд для LI.
А на style так и не попала, но в комментариях здесь прочитала о style и попробовала посмотреть
свойства и атрибуты, но попасть на него так и не смогла.
id вышло свойство footer.
а на id dataKeeper не вышло.
еще не поняла, что здесь означает =
еще не понятно что значит вправо и влево , от чего.
В каком случае нужно нажимать на "здесь стоите вы"
Вместо неинформативного "Так выглядит документ" , надо было бы сделать DOM-дерево с подсветкой местонахождения и по нему бродить. Зачем излишняя сложность ?
И Получить не так должна работать. Раз названо получить , то я и должен получить атрибут или свойство конкретного элемента , если они у него есть.
Подскажите кто-нибудь, пожалуйста, а что значат <пробельные символы> в NodeValue? Т.е., например, двигаешься от одного элемента DOM до другого и сразу на элемент не попадаешь, в промежутке натыкаешься на эти пробельные символы.
Что-то я не догоняю.
При путешествии по DOM, начнем с корневого элемента document.documentElement, который представляет собой тег . Оттуда мы можем двигаться по дереву DOM, fnaf исследуя каждый элемент.
Очень полезная штука! Реально помогает разобраться в дереве DOM-объектов. Особенно когда используешь firefox =)
Спасибо
+1 за "Реально помогает разобраться в дереве DOM-объектов".
Илья спасибо!
спасибо за статью,более-менее разобрался
спасибо за чувство юмора! пять баллов.
спасибо. А где на сайте ссылка "помочь проекту $" ?
Занимательная ерундовинка.
,
Игрался до потери сознания
но во все элементы попал.
теперь без труда представляю))))
спасибо!
А почему самого главного нет - javascript кода к кнопкам при путешествии? я вот и хочу узнать методы для навигации..
Совсем обленились.
Сохраняй страницу со всеми потрохами и смотри на здоровье.)
А ещё было бы прикольно сделать чтобы когда обошел все элементы дерева то выдавалось бы поздравление
Спасибо, по DOM'у побродил. Но вот маленькая незадача...
Ну никак, никак не пойму, как пользоваться формочкой под текстом «Получить:»! Пожалейте дурака, научите пользоваться :'(
UPD: допёр. просто переходим на нужный узел DOM-дерева и вводим название свойства или атрибута. Получаем значение. Хоспади, какой же я тупой >_<
Azadi, можешь объяснить как функционирует игрушка?
Не Хоспади, а Господи Владыка и Отец наш Небесный!
хм.. а вы не задумывались написать утилиту с подобным смыслом на php например, можно еще сделать чтобы отображалось не только содержание документа но и само дерево.. я думаю получилось бы потрясно)
Один вопрос:
когда захожу во внутрь HEAD, двигаюсь к последнему соседу и получаю Node.ELEMENT_NODE
tagName: STYLE. Откуда он берется? В коде хтмл такого не вижу.
Полагаю, что оно наследуется от веб-страницы, в которую добавлен это html-код (как iframe).
5 баллов!
Класс!! Почти как DOOM 3D )))
Объясните по подробнее, как функионирует штука. Хотя бы привидите один пример, плиз
Помните эту статью: Введение. DOM в примерах.? Так вот, это своеобразный тренажер для ориентировки в структуре html-документа( так понял это я). Если Вы еще раз прочтете ту статью, то вероятно поймете, что именно, Вы имеете возможность потренировать. На всякий случай, возьму на себя смелость еще раз попытаться это объяснить ( я ведь сам еще только начал изучать js ).
И так, предположим, что у Вас за окном растет дерево. Часть этого дерева находится в почве( а именно корень и часть ствола ). Так вот, почва - это окно браузера, в котором открыт какой-то html-документ ( дерево ). Другими словами - растет дерево. Корень этого дерева имеет довольно не простою структуру. Этот корень делится на 2. Первая часть этого корня называется DOCUMENT ( в нашем случае ), а вторая HTML. У корня под названием DOCUMENT нет никаких явных ответвлений. А вот у корня HTML таковые имеются. Их два:
Помните я выше писал, что в почве ( окно браузера ) находится корень ( DOCUMENT и HTML ) и часть ствола ( часть самого дерева ). Так вот, та часть ствола под землей - это и есть тег HEAD( потому, что его не видно, если не копать землю, так же как и невидно содержимого между тегами HAED на самой странице( если не лезть в исходник )
). У тега HEAD есть свои ответвления ( простой текст ( типа этого ) и такие теги как TITLE, META, LINK, SCRIPT, и возможно некоторые другие( я просто больше не знаю 
) ). Эти ответвления и составляют мини структуру части дерева под землей.
.
), срывать веточки или листочки, изменять их внешний вид. Но, что бы это делать, нам необходимо указать какую именно веточку мы хотим изменить. Что бы это сделать ( указать ) в DOM имеются следующие "причиндалы":
Просто бацаем по lastChild и всё на этом... Точка.
Далее идет видимая часть дерева ( тег BODY ). У этой части дерева может быть ооочень много веточек ( в качестве примера, помимо текста, можно взять тег DIV или TABLE ), а у этих веточек могут быть ещё веточки ( [div][div]Текст[/div][/div], к примеру ) и так далее... Что еще сказать можно об этом? Ммм... да наверно все. Теперь перейдем к самому DOM'у
DOM позволяет управлять структурой этого дерева. Добавлять веточки ( как бы тупо это не читалось
parentNode - позволяет обратиться к родителю текущего элемента( самая верхняя кнопочка данного тренажера );
previousSibling - перейти к предыдущему элементу( левому ). В тренажере эта кнопочка вторая сверху с левой стороны.
nextSibling - перейти к следующему элементу ( правому ). В тренажере эта кнопочка вторая сверху с правой стороны.
firstChild - перейти к первому дочернему элементу ( левому ). В тренажере эта кнопочка третья сверху с левой стороны.
lastChild - перейти к последнему дочернему элементу ( правому ). В тренажере эта кнопочка третья сверху с правой стороны.
Пример:
[DIV][h3]Текст[/h3][SPAN][/SPAN][/DIV]
Теперь, имея более простой ( даже примитивный ) пример, можно посмотреть на примере, как это работает:
Родителем ( главным элементом ), в данной ситуации является тег DIV. Что бы к нему обратиться, скажем( напишем ), из h3, достаточно нажать на кнопочку parentNode. А если мы находимся в SPAN? Точно так же. h3 и SPAN это дети ( дочерние элементы ( firstChild и lastChild соответственно ) тега DIV ). Теперь попробуем обратиться к h3 из DIV. Для этого, как писалось выше, нужно кликнуть по кнопочке с надписью firstChild ( т.к. h3 это первый ( крайний с лева ) элемент в DIV'е ). А что бы попасть из DIV в SPAN нужно клацнуть по кнопке с надписью lastChild. Что бы из h3 попасть в SPAN достаточно кликнуть по nextSibling, а обратно можно попасть кликнув по кнопочке previousSibling. А как же нам попасть к "Текст", скажем ( напишем ), из... h3? Очень просто. Нужно кликнуть по кнопочке firstChild, т.к. "Текст" - это первый ( и единственный ) элемент в теге h3. А как бы попасть из SPAN туда же ( в "Текст" )? Тут уже сложнее... Нужно клацнуть 2 раза по кнопкам. Первый раз по previousSibling, что бы попасть в h3, а потом все по той же firstChild ( хотя, наверно можно и по lastChild, разницы я не вижу ). Теперь попробуем из DIV попасть в SPAN. Подобный механизм действий уже описывался выше, но, как говорят, повторение - мать учения!
Объяснение очень хорошее и доступное, но не совсем точное. Корень дерева не состоит из двух частей (DOCUMENT и HTML). HTML является дочерним элементом DOCUMENT'а. Иначе было бы невозможно использовать document.getElementById() и другие функции поиска элементов (потому что в DOCUMENT ничего бы не было). Также это можно проверить, выполнив код (в опере или файрфоксе):
В таком случае я бы сказал так: корень состоит из трёх частей: нижняя - это WINDOW. Далее идут DOCUMENT и HTML. А от HTML (верхней части корня) вверх идёт основной ствол - BODY и небольшой - HEAD, каждый из которых имеет свои ветви. Только у небольшого ствола (HEAD) их обычно намного меньше.
Видимо автор комента имел в виду не DOCUMENT а DOCTYPE...хотя и это не совсем верно
Вот именно это я имел ввиду:) Только я не согласен с Вами. DOCUMENT( DOCTYPE ) - это тег... Только немного специфический:) Он так же является частью документа.
шикарная вещь. разобралсо теперь с типами нодов и стал лучше понимать дом
Спасибо, теперь понятно что к чему
спасибо огромное! теперь по немногу начал понимать зачем DOM вообще существует!
Отличная штука. Только кое-чего не понятно, скажм, firstChild тега
по моему разумению это
, а оказывается, что это не так, первым ребенком является текст (пробельные символы). Объясните неразумному, откуда они, это табуляция учитывается? Т.е., если бы скажем вместо
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Документ</title> </head>имелось бы
то первый ребенок был бы meta?
Поспешил с вопросом, уже разобрался. За сайт еще раз спасибо.
почему у меня ни в одном браузере он не открывается нормально? появляются символы, квадратики....
заметил небольшую ошибку, а именно комментарии html по представленному коду находятся до закрывающего тега body, а в "игрушке" комментарии идут после body.
Очень творческий и доступный метод изложения, спасибо автору )
Скажите,плиз, что нужно ставить в поле "получить". Поставила Style, нажала кнопку, вышло окно border:1 px solid green, но в этом коде нигде нет зеленой рамочки. наоборот есть красный цвет. Подставляла в это поле class, body, ul, html везде дает undefined.
Ходила по кнопочкам, попадала на div, title,meta, head, body,html,ul , li .
Получается, что на одну и туже кнопочку нажимала 2 раза подряд для LI.
А на style так и не попала, но в комментариях здесь прочитала о style и попробовала посмотреть
свойства и атрибуты, но попасть на него так и не смогла.
id вышло свойство footer.
а на id dataKeeper не вышло.
еще не поняла, что здесь означает =
еще не понятно что значит вправо и влево , от чего.
В каком случае нужно нажимать на "здесь стоите вы"
уже попала и на "ОСТОРОЖНО" и увидела background-color:red.
Каждый раз как попадаешь на тег, нужно нажимать вверху ссылку "я стою здесь"
спасибо, кажется суть уловила.
Зачет! помогает понять то что DOM не ограничивается только тэгами, комментарии и текстовые элементы тоже его часть.
Почему комментарий находится на одном уровне с head и body, если он расположен внутри body?
Это автор видимо ошибся. А так спасибо, очень наглядно.
ппц я пока это догнал чуть с ума не сошел запутало оч сильно)
Вместо неинформативного "Так выглядит документ" , надо было бы сделать DOM-дерево с подсветкой местонахождения и по нему бродить. Зачем излишняя сложность ?
И Получить не так должна работать. Раз названо получить , то я и должен получить атрибут или свойство конкретного элемента , если они у него есть.
С появлением JQuery разбираться в DOM так как раньше уже не нужно.
Очень хороший тренажер!
Большое спасибо!
Но у меня вопрос относительно "детей". Если у узла
не два "ребенка"- , а три или более, как обозначить центральных "детей"?
- - это firstChild, последний
- - это lastChild, а промежуточные как называются?
Т.е. первый
(Отредактированное предыдущее сообщение)
Очень хороший тренажер!
Большое спасибо!
Но у меня вопрос относительно "детей". Если, например, у узла UL не два "ребенка", а три или более, как обозначить центральных "детей"?
Т.е.
sidarvik,
не уверен, но похоже можна обращаться по померу вот так:
childNodes[i]
где i - номер потомка
Подскажите кто-нибудь, пожалуйста, а что значат <пробельные символы> в NodeValue? Т.е., например, двигаешься от одного элемента DOM до другого и сразу на элемент не попадаешь, в промежутке натыкаешься на эти пробельные символы.
Что-то я не догоняю.
Дерево не соответствует навигации!
Дерево не соответствует навигации!
При путешествии по DOM, начнем с корневого элемента document.documentElement, который представляет собой тег . Оттуда мы можем двигаться по дереву DOM, fnaf исследуя каждый элемент.
DOM этого документа можно изучить, последовательно перемещаясь от одного элемента к Drift Hunters другому, начиная с корневого элемента .
А ещё было бы прикольно сделать чтобы когда обошел все элементы дерева то выдавалось бы поздравление yuzde