В этой статье хотелось бы рассказать что такое дерево документа в 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 коде элемент может внутри себя включать другие. Следовательно, тэг внутри которого находятся прочие тэги, называется предком (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 необходимые нам теги.