HTML фактически является разметкой вашего DOM (объектная модель документа).Корнем документа является <html>, который содержит много уровней <div>s, <p> аграфов, <h1> заголовков и так далее.
DOM - это дерево (графическая структура) вашей HTML-разметки.У него будет «корень», в котором много «детей», у детей будут «братья и сестры» и «родители», «потомки» и «предки».Корень не имеет родителя и является предком всех узлов-потомков.например, ваш типичный HTML-документ будет структурирован следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Banner Example</title>
<style type="text/css">
#header {
background-image: url('branding_logo.jpg');
}
h1 a {
display: block;
height: 120px;
width: 500px;
text-indent: -9999; /* to hide the text that would show */
/* over the banner */
border: 1px solid black;
}
</style>
</head>
<body>
<div id='header'>
<h1><a href="/">This is a header link.</a></h1>
<p>Here is some text.</p><p>Here is some more text.</p>
</div>
<div id="content">
<p>here is a bunch of content.</p>
</div>
</body>
</html>
В этом случае html - это корневой узел, у которого есть два дочерних элемента: голова и тело.Голова и тело - братья и сестры.Вы можете использовать модель DOM с селекторами, чтобы выбрать, какие объекты (содержащиеся в узле) будут затронуты кодом, таким как CSS.
CSS будет принимать селекторы и стилизовать их, как указано в блоке атрибутов.Вы можете выбрать все элементы <p>, используя
p { color: red; }
Или вы можете выбрать только 'p', если это потомок div с идентификатором content:
div # content {color: black;}
CSS обычно будет стилизовать тег, используя самое конкретное описание DOM, которое может быть применено к нему.Итак, в моем приведенном выше примере HTML первый стиль CSS будет применяться ко всем p, а затем второй, более конкретный стиль будет применяться только к этому одному p в div содержимого.
По сути, чтопроисходит, если ваш браузер будет разбирать ваш HTML-код на разделы, которые позволяют выбирать их индивидуально.Эта проанализированная структура - ваша DOM.CSS использует DOM для применения стилей.jQuery делает то же самое, позволяя вам выбрать конкретный узел из DOM и динамически применять стили или действия к этому узлу на стороне клиента.