Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

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

Раздел: 

В этой статье хотелось бы рассказать что такое дерево документа в html и как связаны элементы в нём.

В html документе многие теги являются вложенными в другие, на пример:

<html>
   <head>
      <title>Примерный заголовок</title>
   </head>
   <body>
      <div class=”container”>
         <h1>Что-то важное</h1>
         <div class=”left”>
            <h2>Чуть менее важная инфо</h2>
            <p>Содержимое страницы</p>
            <ul>
               <li>Пункт 1</li>
               <li>Пункт 2</li>
               <li>Пункт 3</li>
            </ul>
         </div>
      </div>
   </body>
</html>

Так выглядит код страницы, однако разработчик видит его иначе. Этот хаотический набор символов благодаря пониманию структуры документа выстраивается в четко определенную схему. Так он видит что head и body вложены в html, а h2 p ul в div class=”left” и так дальше.

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

Дерево документа — схематическое представление кода страницы, отражающие взаимосвязи тегов между собой.

В свою очередь в зависимости от характера связи объединяющего элементы страницы они подразделяются на предков и потомков, родителей и дочерей, сестринские элементы и прочее.

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

Как было сказано выше, в html коде элемент может внутри себя включать другие. Следовательно, тэг внутри которого находятся прочие тэги, называется предком (ancestor), а эти «другие» называются потомками (descendant).

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

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

Предок, имеющий первый уровень вложенности, называется родитель (parent), а потомок содержащийся непосредственно в нем, имеет название дочерний элемент (child).

Количество дочерних элементов содержащихся внутри родителя ничем не ограничено, но дочерние могут иметь только одного родителя.

Родителей и дочерей еще иногда называют прямыми предками и прямыми потомками.

Рассмотрим на нашем примере

Head выступает родителем и предком для title, а он выступает дочерним элементом и потомком для head; h2, p, ul, li выступают потомками для div class=”left”, в тоже время как li одновременно является потомком для ul и div class=”left”, а родителем li выступает только ul . В этом и заключается основное отличие предка от родителя, и дочери от потомка.

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

К ним относятся дочерние элементы с общим родителем.

Сестринским тегам важно только наличие общего родителя, а тип элемента может быть разным, например:

h2, p, ul, являются сестринскими и относятся к родителю div class=”left”, в то же время все li также будут сёстрами только под родителем ul.

Смежные (adjacent)

Теги стоящие в структуре документа рядом и имеющие единого родителя.

Так, для нашего примера, h2 смежный c p, ul смежный p, а p смежный ul и h2 одновременно.

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

Тут всё просто: следующий сестринский элемент (following sibling) — по коду идет сразу после интересующего нас тега и имеет с ним общего родителя, а предыдущий сестринский (preceding sibling) представляет из себя тег предшествующий нашему и также имеющий с ним единого родителя.

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

Крайне похожи на только что описанные нами связи, но есть нюансы - в этом случае для нас не имеет значения наличие общего родителя. Например если для h2 нету предыдущего сестринского тега, то просто предыдущим (preceeding) для него будет div class=”left”, со следующим (preceding) та же картина.

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

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

Например для div class=”left” первым ребёнком будет h2, а в качестве последнего выступает ul.

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

Им считается тег, который не имеет ни предков, ни родителей. Он включает в себя все «ветви» нашего дерева и открывается в самом начале документа (<html>), а закрывается в самом конце (</html>).

Подводя итоги

Понимание структуры дерева элементов, а также всех родственных связей в нем, поможет не только легко и быстро ориентироваться в коде, а ещё даст возможность легче и точнее выбирать в CSS необходимые нам теги.