Xiper

Дерево документа HTML

Автор: Евгений Рыжков Дата публикации:

Дерево документа (document tree) — это схема построения HTML документа, которая показывает связи между различными элементами страницы: порядок следования и вложенность элементов. Эта схема помогает ориентироваться в этой, на первый взгляд, хаотичной каше HTML тегов.

Веб разработчику дерево документа помогает при написании CSS правил и Javascript сценариев.

Заметка

Не нужно путать дерево документа и объектную модель документа (DOM). DOM — понятие более сложное (о нем будет написано немного позже).

Чтобы не вдаваться в долгие и нудные объяснения, почему дерево документов назвали деревом, рассмотрим пример — возьмем простой HTML код:

<html>
<head>
	<title>Загоовок страницы</title>
</head>
<body>
	<div class="mainWrap">
		<h1>Основной заголовок</h1>
		<p>абзац текста.</p>
		<ul>
		<li>пункт 1</li>
		<li>пункт 2</li>
		</ul>
	</div>
	<div class="sideBar">
		<h2>Второй заголовок</h2>
		<p>Текст</p>
	</div>
</body>
</html>

Так видят HTML код непросвещенные аборигены, которые случайно нажали просмотр кода страницы. А вот наметанный глаз веб разработчика разберет его по полочкам, увидит все уровни вложенности и взаимосвязи. Он выстроит из хаоса четкую иерархическую структуру в виде дерева (потому что схема похожа на очертания дерева):

дерево html документа

Родственные связи

Между элементами дерева документа существуют определенные связи. Рассмотрим их.

Предки и потомки

Из схематического изображения дерева, да и из самого HTML кода, понятно, что одни элементы являются вложенными в другие. Элементы, которые содержат другие, являются предками (ancestor) по отношению к во всем вложенным в него. Вложенные в свою очередь являются его потомками (descendant).

Для наглядности рассмотрим одну ветку нашего дерева:

отношения предок-потомок

Каждый предок может иметь неограниченное число потомков. Каждый потомок будет иметь число предков в зависимости от структуры дерева и в какой ветке он будет расположен, но в любом случае как минимум один предок будет.

Родители и дочери

Родитель (parent) — это непосредственный предок (предок первого уровня) элемента. И наоборот, непосредственный потомок (потомок первого уровня) называется дочерним элементом (child).

отношения родитель-дочь

Каждый родитель может иметь неограниченное число дочерей. У дочернего элемента будет только один родитель.

Элемент-родитель еще называют прямой предок, а дочерний элемент — прямой потомок. Это что-то вроде семантических названий.

Сестринские элементы

Сестринские элементы (siblings) — это группа из двух и более элементов, у которых общий родитель. Элементы не обязательно должны быть одного типа, просто у них должен быть общий родитель.

сестринские элементы

Смежные элементы

Смежные элементы (adjacent) — это сестринские элементы, которые расположены «по соседству».

смежные элементы

Предыдущий сестринский и следующий сестринский

Тут должно быть все понятно из самих названий терминов. Предыдущий сестринский (preceding sibling) — предыдущий по коду сестринский элемент. На нашей примере-ветке для <ul> это будет <p>, для <p> — <h1>, а для <h1> не будет предыдущего сестринского.

Аналогично и следующий сестринский (following sibling): для <h1> — <p>, для <p> — <ul>, для <ul> — нет.

Предыдущий и следующий

Предыдущий элемент (preceeding) — такой же предыдущий элемент по коду, только без ограничений сестринских отношений. Для нашей ветки: для <ul> это будет <p>, для <p> — <h1>, для <h1> — <div class="mainWrap">.

Аналогично следующий элемент (preceding) не имеет ограничений сестринских отношений: для <h1> — <p>, для <p> — <ul>, для <ul> — <li> (первый) и так далее.

Первый ребенок и последний

Первый ребенок (first child) — это первый дочерний элемент родителя в дереве документа, а последний (last child) — последний.

first child и last child

Корневой элемент

Корневой элемент (root) — это предок всем предкам, это «корень» нашего дерева документа, это единственный элемент, который не имеет родителя, это тег <html>.

Материалы

  • The Document Tree
  • W3C :: Requirements and Recommendations