Дерево документа HTML
На этой странице:
Дерево документа (document tree) — это схема, на которой наглядно представлены отношения между элементами в документе HTML: вложенность одних элементов в другие, порядок следования элементов.
Дерево документа помогает ориентироваться в документе HTML, особенно при разработке таблиц стилей и сценариев на стороне клиента (например, на JavaScript).
Пример документа HTML
Рассмотрим пример простого документа HTML, который будет использован в дальнейших объяснениях:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Моя страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="index.css" media="all" />
</head>(1)
<body>
<h1>Добрый день!</h1>
<p>Эту страницу сделал Пупкин Василий Эдуардович.</p>
</body>
</html>
Графическое представление дерева документа
Существует два наиболее распространённых графических представления дерева документа. Первое представление — с горизонтальным расположением уровней (рис. 1). Оно наглядно в простых случаях, однако вызывает сложности при большом количестве уровней вложенности элементов или при большом количестве элементов на одном уровне.
 |
Рис. 1.Графическое представление дерева документа HTML с горизонтальным расположением уровней |
|---|
Второе представление дерева документа — с вертикальным расположением уровней (рис. 2). Оно менее наглядно, но удобно для практических задач и легко формируется программными средствами.
 |
Рис. 2.Графическое представление дерева документа HTML с вертикальным расположением уровней |
|---|
Корневой элемент html
Элемент html, находящийся в основании дерева документа, называется корневым элементом (root или root element). Элемент html не вложен ни в какой другой элемент; все остальные элементы вложены в элемент html.
Элемент html обозначает весь документ HTML. В любом языке разметки, подобном HTML, также определён свой корневой элемент — например, элемент svg в языке SVG или элемент score-partwise в языке MusicXML.
Имя корневого элемента указывается в объявлении типа документа после слова DOCTYPE.
Иерархические отношения между элементами
Если элемент B вложен в элемент A, то элемент B называется потомком (descendant) элемента A, а элемент A — предком (ancestor) элемента B (рис. 3).
Например, в документе (1) элементы h1 и p — потомки элемента body; элемент head — предок элемента title; любой элемент, кроме html,— потомок элемента html; элемент html — предок всех остальных элементов.
 |
Рис. 3.Отношения «предок» и «потомок» |
|---|
Если элемент B непосредственно вложен в элемент A (то есть B вложен в A, и нет такого элемента C, чтобы B был вложен в C, а C был вложен в A) — то элемент B называется дочерним элементом (child) элемента A, а элемент A — родительским элементом (parent) элемента B (рис. 4). Можно сказать, что дочерний элемент — это ближайший потомок, а родительский элемент — это ближайший предок.
Например, в документе (1) элемент h1 — дочерний элемент элемента body; элемент head — родительский элемент элемента meta. Элемент h1 не является дочерним по отношению к элементу html, так как он вложен непосредственно не в элемент html, а в элемент body.
 |
Рис. 4.Отношения «родительский элемент» и «дочерний элемент» |
|---|
Если элементы A и B являются дочерними элементами одного и того же элемента, то они называются смежными элементами (sibling) по отношению друг к другу (рис. 5).
Например, в документе (1) элементы h1 и p — смежные по отношению друг к другу; элементы head и body — также смежные по отношению друг к другу.
 |
Рис. 5.Отношение «смежный элемент» |
|---|