Растим деревья

После создания и оформления документа следующий шаг состоит в передаче его браузеру для вывода пользователям. Здесь начинает играть свою роль DOM. Считывая написанный документ, браузер динамически генерирует DOM, который можно использовать в программах. В частности DOM представляет страницу HTML как дерево, почти таким же образом, как можно представить себе генеалогическое семейное дерево пользователя. Каждый элемент на странице представлен в DOM как узел, с ветвями, соединенными с элементами, которые он непосредственно содержит (его потомки), и с элементом, в котором он непосредственно содержится (его предок). Давайте рассмотрим простой документ HTML, чтобы яснее представить себе эти отношения:

<html>

<head>

<title>This is a Document!</title>

</head>

<body>

<h1>This is a header!</h1>

This is a paragraph! <em>Excitement</em>!

</p>

<p>

This is also a paragraph, but it's not nearly as exciting as the last one.

</p>

</body>

</html>

Как можно видеть, весь документ содержится в элементе html. Этот элемент непосредственно содержит два других: head и body. Они показаны в нашей модели как его потомки, и каждый из них указывает на html, как на предка. И так далее, вниз по иерархии документа, где каждый элемент указывает на своих непосредственных потомков, и на своего непосредственного предшественника предка.

· title является потомком head.

· body имеет три потомка - два элемента p и элемент h1.

· Элемент p с id="excitingText" имеет своего собственного потомка - элемент em.

· Текстовое содержимое элементов (например, "This is a Document!") также представлено в DOM как текстовые узлы. Они не имеют собственных потомков, но указывают содержащие их элементы как предков.

Поэтому получаемая иерархия DOM для показанного выше документа HTML визуально представляется следующим образом:

увеличить изображение
Рис. 8.1. Документ HTML, представленный визуально как дерево DOM.

Это прямолинейное отображение из документа HTML в древовидную структуру, которая сжато представляет прямые отношения между элементами на странице, делая иерархию понятной. Однако можно заметить, что здесь добавлен узел, помеченный document, выше узла html.Это корень документа, который действует как наиболее видимая зацепка для JavaScript в документе.