Javascript.RU

Интерактивное путешествие по DOM

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/traversing-dom.

Здесь вы сможете побродить по DOM, посмотреть все элементы и проверить, все ли вы понимаете правильно.

Привет, отважные путешественники!

Вам предоставляется возможность побродить в чудесном мире DOM.

Путь начинается с document.documentElement (он же - тег <HTML>).

Ниже находится документ и кнопки управления. Сверяйте свои движения с картой (документом).

Все может оказаться совсем не так просто. Как правило, уже первые движения вызывают вопрос "где я нахожусь?". Чтобы на него ответить - посмотрите на "Текущий узел" и сверьте его с HTML.
Удачи и новых открытий!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Документ</title>
    </head>
    <body>
        <div id="dataKeeper">Data</div>

        <ul>
            <li style="background-color:red">Осторожно</li>
            <li class="info">Информация</li>

        </ul>
        <div id="footer">Made in Russia &copy;</div>
    <!-- комментарий -->
    </body>
</html>

Текущий элемент
nodeType:
tagName:
nodeValue:
От текущего элемента могу двигаться:
Получить:
 

Автор: Valenn, дата: 20 сентября, 2008 - 07:06
#permalink

Очень полезная штука! Реально помогает разобраться в дереве DOM-объектов. Особенно когда используешь firefox =)

Спасибо


Автор: uKarpatah (не зарегистрирован), дата: 23 октября, 2008 - 18:36
#permalink

+1 за "Реально помогает разобраться в дереве DOM-объектов".
Илья спасибо!


Автор: Timorensis, дата: 26 октября, 2008 - 11:50
#permalink

спасибо за статью,более-менее разобрался


Автор: Гость (не зарегистрирован), дата: 20 ноября, 2008 - 22:57
#permalink

спасибо за чувство юмора! пять баллов.


Автор: Гость (не зарегистрирован), дата: 5 февраля, 2009 - 14:11
#permalink

спасибо. А где на сайте ссылка "помочь проекту $" ?


Автор: Гость (не зарегистрирован), дата: 19 октября, 2009 - 22:10
#permalink

Занимательная ерундовинка.
Игрался до потери сознания ,
но во все элементы попал.
теперь без труда представляю))))
спасибо!


Автор: Гость (не зарегистрирован), дата: 30 октября, 2009 - 17:13
#permalink

А почему самого главного нет - javascript кода к кнопкам при путешествии? я вот и хочу узнать методы для навигации..


Автор: Гость (не зарегистрирован), дата: 20 августа, 2010 - 12:24
#permalink

Совсем обленились.

Сохраняй страницу со всеми потрохами и смотри на здоровье.)


Автор: Гость (не зарегистрирован), дата: 11 ноября, 2009 - 12:14
#permalink

А ещё было бы прикольно сделать чтобы когда обошел все элементы дерева то выдавалось бы поздравление


Автор: Azadi, дата: 7 января, 2010 - 11:16
#permalink

Спасибо, по DOM'у побродил. Но вот маленькая незадача...
Ну никак, никак не пойму, как пользоваться формочкой под текстом «Получить:»! Пожалейте дурака, научите пользоваться :'(

UPD: допёр. просто переходим на нужный узел DOM-дерева и вводим название свойства или атрибута. Получаем значение. Хоспади, какой же я тупой >_<


Автор: Alexciao (не зарегистрирован), дата: 7 июля, 2010 - 18:19
#permalink

Azadi, можешь объяснить как функционирует игрушка?


Автор: Гость (не зарегистрирован), дата: 11 февраля, 2011 - 19:05
#permalink

Не Хоспади, а Господи Владыка и Отец наш Небесный!


Автор: @Hunter@, дата: 3 февраля, 2010 - 04:54
#permalink

хм.. а вы не задумывались написать утилиту с подобным смыслом на php например, можно еще сделать чтобы отображалось не только содержание документа но и само дерево.. я думаю получилось бы потрясно)


Автор: Гость (не зарегистрирован), дата: 17 марта, 2010 - 15:35
#permalink

Один вопрос:
когда захожу во внутрь HEAD, двигаюсь к последнему соседу и получаю Node.ELEMENT_NODE
tagName: STYLE. Откуда он берется? В коде хтмл такого не вижу.


Автор: Гость (не зарегистрирован), дата: 16 января, 2011 - 18:01
#permalink

Полагаю, что оно наследуется от веб-страницы, в которую добавлен это html-код (как iframe).


Автор: Koh, дата: 22 марта, 2010 - 15:34
#permalink

5 баллов!


Автор: NarKoZ (не зарегистрирован), дата: 9 июня, 2010 - 11:32
#permalink

Класс!! Почти как DOOM 3D )))


Автор: Alexciao (не зарегистрирован), дата: 7 июля, 2010 - 17:28
#permalink

Объясните по подробнее, как функионирует штука. Хотя бы привидите один пример, плиз


Автор: romchiksoad (не зарегистрирован), дата: 31 июля, 2010 - 00:48
#permalink

Помните эту статью: Введение. DOM в примерах.? Так вот, это своеобразный тренажер для ориентировки в структуре html-документа( так понял это я). Если Вы еще раз прочтете ту статью, то вероятно поймете, что именно, Вы имеете возможность потренировать. На всякий случай, возьму на себя смелость еще раз попытаться это объяснить ( я ведь сам еще только начал изучать js ).
И так, предположим, что у Вас за окном растет дерево. Часть этого дерева находится в почве( а именно корень и часть ствола ). Так вот, почва - это окно браузера, в котором открыт какой-то html-документ ( дерево ). Другими словами - растет дерево. Корень этого дерева имеет довольно не простою структуру. Этот корень делится на 2. Первая часть этого корня называется DOCUMENT ( в нашем случае ), а вторая HTML. У корня под названием DOCUMENT нет никаких явных ответвлений. А вот у корня HTML таковые имеются. Их два:

  1. html-тег HEAD;
  2. 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 и всё на этом... Точка.


Автор: Прохожий (не зарегистрирован), дата: 24 августа, 2010 - 15:44
#permalink

Объяснение очень хорошее и доступное, но не совсем точное. Корень дерева не состоит из двух частей (DOCUMENT и HTML). HTML является дочерним элементом DOCUMENT'а. Иначе было бы невозможно использовать document.getElementById() и другие функции поиска элементов (потому что в DOCUMENT ничего бы не было). Также это можно проверить, выполнив код (в опере или файрфоксе):

alert(document.firstChild.nextSibling.tagName);

В таком случае я бы сказал так: корень состоит из трёх частей: нижняя - это WINDOW. Далее идут DOCUMENT и HTML. А от HTML (верхней части корня) вверх идёт основной ствол - BODY и небольшой - HEAD, каждый из которых имеет свои ветви. Только у небольшого ствола (HEAD) их обычно намного меньше.


Автор: Шел туда же (не зарегистрирован), дата: 7 сентября, 2010 - 15:14
#permalink

Видимо автор комента имел в виду не DOCUMENT а DOCTYPE...хотя и это не совсем верно


Автор: romchiksoad (не зарегистрирован), дата: 25 ноября, 2010 - 23:23
#permalink

Вот именно это я имел ввиду:) Только я не согласен с Вами. DOCUMENT( DOCTYPE ) - это тег... Только немного специфический:) Он так же является частью документа.


Автор: Гость (не зарегистрирован), дата: 21 сентября, 2010 - 13:42
#permalink

шикарная вещь. разобралсо теперь с типами нодов и стал лучше понимать дом


Автор: Гость (не зарегистрирован), дата: 12 марта, 2011 - 13:07
#permalink

Спасибо, теперь понятно что к чему


Автор: testerNP (не зарегистрирован), дата: 17 марта, 2011 - 23:58
#permalink

спасибо огромное! теперь по немногу начал понимать зачем DOM вообще существует!


Автор: Гость (не зарегистрирован), дата: 11 апреля, 2011 - 12:57
#permalink

Отличная штука. Только кое-чего не понятно, скажм, firstChild тега

<head>

по моему разумению это

<meta>

, а оказывается, что это не так, первым ребенком является текст (пробельные символы). Объясните неразумному, откуда они, это табуляция учитывается? Т.е., если бы скажем вместо

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Документ</title>
</head>

имелось бы

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Документ</title>
</head>

то первый ребенок был бы meta?


Автор: Гость (не зарегистрирован), дата: 11 апреля, 2011 - 13:41
#permalink

Поспешил с вопросом, уже разобрался. За сайт еще раз спасибо.


Автор: Гость (не зарегистрирован), дата: 11 апреля, 2011 - 21:10
#permalink

почему у меня ни в одном браузере он не открывается нормально? появляются символы, квадратики....


Автор: Гость (не зарегистрирован), дата: 29 июня, 2011 - 20:24
#permalink

заметил небольшую ошибку, а именно комментарии html по представленному коду находятся до закрывающего тега body, а в "игрушке" комментарии идут после body.


Автор: Psylone (не зарегистрирован), дата: 22 августа, 2011 - 17:00
#permalink

Очень творческий и доступный метод изложения, спасибо автору )


Автор: olga153b, дата: 6 сентября, 2011 - 13:45
#permalink

Скажите,плиз, что нужно ставить в поле "получить". Поставила 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 не вышло.

еще не поняла, что здесь означает =
еще не понятно что значит вправо и влево , от чего.
В каком случае нужно нажимать на "здесь стоите вы"


Автор: olga153b, дата: 9 сентября, 2011 - 13:12
#permalink

уже попала и на "ОСТОРОЖНО" и увидела background-color:red.

Каждый раз как попадаешь на тег, нужно нажимать вверху ссылку "я стою здесь"

спасибо, кажется суть уловила.


Автор: Бо (не зарегистрирован), дата: 20 октября, 2011 - 09:50
#permalink

Зачет! помогает понять то что DOM не ограничивается только тэгами, комментарии и текстовые элементы тоже его часть.


Автор: Гость (не зарегистрирован), дата: 4 ноября, 2011 - 23:16
#permalink

Почему комментарий находится на одном уровне с head и body, если он расположен внутри body?


Автор: Гость (не зарегистрирован), дата: 7 декабря, 2011 - 14:29
#permalink

Это автор видимо ошибся. А так спасибо, очень наглядно.


Автор: Гость (не зарегистрирован), дата: 20 января, 2012 - 23:45
#permalink

ппц я пока это догнал чуть с ума не сошел запутало оч сильно)


Автор: arbeiter (не зарегистрирован), дата: 18 января, 2012 - 13:33
#permalink

Вместо неинформативного "Так выглядит документ" , надо было бы сделать DOM-дерево с подсветкой местонахождения и по нему бродить. Зачем излишняя сложность ?

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


Автор: Ники (не зарегистрирован), дата: 31 мая, 2012 - 10:14
#permalink

А что это за кнопки? Нихера непонятно...


Автор: Максим(веб) (не зарегистрирован), дата: 22 ноября, 2012 - 05:46
#permalink

С появлением JQuery разбираться в DOM так как раньше уже не нужно.


Автор: sidarvik (не зарегистрирован), дата: 24 ноября, 2012 - 12:59
#permalink

Очень хороший тренажер! Большое спасибо!

Но у меня вопрос относительно "детей". Если у узла

    не два "ребенка"
  • , а три или более, как обозначить центральных "детей"?
    Т.е. первый
  • - это firstChild, последний
  • - это lastChild, а промежуточные как называются?


Автор: sidarvik (не зарегистрирован), дата: 24 ноября, 2012 - 13:24
#permalink

(Отредактированное предыдущее сообщение)

Очень хороший тренажер! Большое спасибо!

Но у меня вопрос относительно "детей". Если, например, у узла UL не два "ребенка", а три или более, как обозначить центральных "детей"?
Т.е.

  • первый LI - firstChild
  • промежуточный(ые) LI - ?
  • последний LI - lastChild

Автор: RRRoman (не зарегистрирован), дата: 29 ноября, 2012 - 18:55
#permalink

sidarvik,
не уверен, но похоже можна обращаться по померу вот так:
childNodes[i]
где i - номер потомка


Автор: Гость (не зарегистрирован), дата: 9 апреля, 2015 - 02:54
#permalink

Подскажите кто-нибудь, пожалуйста, а что значат <пробельные символы> в NodeValue? Т.е., например, двигаешься от одного элемента DOM до другого и сразу на элемент не попадаешь, в промежутке натыкаешься на эти пробельные символы.
Что-то я не догоняю.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
7 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum