Главная страница   /   2.7. Иерархия элементов (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

2.7. Иерархия элементов

Элементы в HTML документе образуют настоящую иерархию. Элемент html содержит элемент body, который содержит контекстные элементы, каждый из которых может содержать другие элементы, и так до бесконечности.

Понимание этой иерархии очень важно, если вы хотите управлять документом, а также применять стили, используя CSS (об этом я расскажу в главе 3), или использовать jQuery, чтобы находить в документе элементы (это я поясню в главах 5 and 6).

Наиболее важной частью иерархии являются отношения между элементами. Чтобы нагляднее продемонстрировать эти отношения, я схематично представил иерархию для некоторых элементов нашего примера цветочного магазина на рисунке 2-5.

Рисунок 2-5: Иерархия некоторых элементов

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

Отношения родительского узла и его наследников

Отношения родительского элемента и его наследника -- это отношения, когда, например, один элемент содержит другой элемент. Как показано на рисунке, элемент form является дочерним элементом узла body. И наоборот, элемент body является родительским элементом для form. У одного элемента может быть несколько наследников, но только один родительский элемент. В нашем примере у элемента body двое дочерних элементов, form и h1, и он является родительским для них обоих.

Родительские отношения существуют только между элементом и элементами, содержащимися в нем непосредственно. Таким образом, например, элементы div являются наследниками элемента form, но не элемента body.

Между элементами-наследниками существуют различные отношения. Первым дочерним элементом является тот элемент, который первым упоминается в родительском узле. Например, элемент h1 – это первый дочерний элемент узла body. Последний дочерний элемент -- это тот элемент-наследник, который упоминается последним в родительском узле. Элемент form является последним дочерним элементом узла body. Всегда можно обратиться к nth-child (определенному дочернему элементу), начиная отсчет с первого и считая каждый дочерний элемент, доходя до нужного (n-го) (первый дочерний элемент берется за 1).

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

Потомками элемента считаются его дочерние элементы, дочерние элементы этих дочерних элементов и так далее. По сути, все элементы, включенные в родительский узел непосредственно или являясь дочерними элементами его дочерних элементов, будут потомками этого предка. Например, потомками элемента body являются h1, form, и div элементы. Все элементы, показанные на рисунке, являются потомками элемента html.

Противоположное отношение называется отношение к предкам (ancestors) . Предками элемента считаются его родительский узел, родительские узел этого узла и так далее. Для элемента form предками являются элементы body и html. Для обоих div элементов предками являются элементы form, body, и html.

Отношения элементов одного уровня

Элементами одного уровня (сестринскими элементами) считаются элементы, у которых один и тот же родительский элемент. Например, элементы h1 и form – это элементы одного уровня, потому что у них один родительский узел body. Работая с сестринскими элементами, мы различаем следующий сестринский элемент (next siblings) и предыдущий сестринский элемент (previous siblings). Они расположены до и после текущего элемента. Не для всех элементов могут существовать оба, предыдущий и последующий, элементы этого уровня; у первого и последнего дочернего элемента будет только один из них.