Изучение CSS — Глава 3: Объектная модель документа
Глава 1: Начало работы с CSS
Глава 2: Введение в селекторы CSS
Глава 3: Объектная модель документа
Глава 4: Более глубокий взгляд на селекторы CSS
Зачем обсуждать это здесь?
Объектная модель документа — обычно называемая DOM — представляет собой дерево объектов или элементов, составляющих HTML-документ. Это дерево часто сравнивают с генеалогическим древом по нескольким причинам. Во-первых, элементы внутри дерева включают в себя родительские элементы, дочерние элементы, прародительские элементы, внучатые элементы и одноуровневые элементы. Во-вторых, если вы нарисуете его буквально, оно будет напоминать генеалогическое древо. Тем не менее, это обычно не обсуждается в сфере CSS, но я считаю, что важно хорошо освежить в памяти, прежде чем углубляться в то, на что способны селекторы CSS.
Родительские и дочерние элементы
Отношения родительских и дочерних элементов довольно просты. Дочерний элемент — это любой элемент, который содержится внутри другого элемента. С другой стороны, родительский элемент — это любой элемент, внутри которого есть другой элемент. Если вы когда-либо работали с HTML, вы видели этот тип элементарных отношений. Одним из основных примеров может быть внутри тега body. Любые теги, находящиеся непосредственно внутри тега body, являются дочерними элементами тега body. Это сделает тег body родительским элементом.
Примечание. Текст «Введите заголовок страницы здесь» технически является дочерним элементом тега h1, как и любой текст внутри любого тега HTML. Текст является отдельным элементом в DOM и поэтому считается отдельным разделом в DOM под тегом, в котором он находится.
Родственные элементы
Родственные элементы — это любые элементы, которые существуют в одном и том же теге. Используя тот же пример выше, мы можем добавить еще один элемент внутри тега body, который будет родственным тегу h1, например:
Бабушки и дедушки и внуки
Продвинув идею еще на один шаг, мы можем добавить еще один элемент к телу. Теперь, если мы дадим этому новому элементу собственный дочерний элемент, тег body будет иметь внука, а добавленный элемент будет иметь дедушку и прародителя, который является тегом body.
Что дальше?
Далее мы углубимся в селекторы CSS, используя информацию, которую мы только что рассмотрели. Базовое понимание DOM поможет в изучении следующего раздела.
