1.3 文档对象模型

在开始学习CSS之前，关于HTML我们要介绍的最后一个知识点，就是HTML结构所对应的文档对象模型（以下简称“DOM”）。DOM是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在CSS中引用DOM中特定的位置，就可以选中相应的HTML元素，并修改其样式属性。

我们就通过下面这个例子来理解DOM吧。

  1. // HTML代码正确缩进，以表明标签的层次关系
  2. <body>
  3.     <section>
  4.         <h1>The Document Object Model</h1>
  5.         <p>The page’s HTML markup structure defines the DOM.</p>
  6.     </section>
  7. </body>

enter image description here图1-13 与标记对应的简单DOM结构图

上面的代码示例和图1-13展示了一个典型的页面结构，即结构化的标签（即<section>）包含着几个子内容标签（这里的<h1>和<p>）。代码中用缩进表示元素间的层次关系。这种层次关系也可以用垂直的、类似家族树的结构图表示。

图1-14展示了标明元素轮廓的HTML元素。

enter image description here图1-14 从图中可以看出，body元素包含着section元素，后者进而包含一个标题和一个段落

对于这个例子中的DOM层次，我们可以作如下表述。

  • section是h1和p的父元素，也是直接祖先元素。
  • h1和p是section的子元素，也是直接后代元素。
  • h1和p是同胞元素，它们有共同的父元素section.
  • section、h1和p 是body的后代元素，或者下面的元素（嵌套在后者的内部）。
  • section和body是h1和p的祖先元素，或者上面的元素（在某一层次上包含后者）。在本书后面几章里，我们会经常使用子元素、父元素、同胞元素、祖先元素和后代元素这些概念。所以，请读者务必先对HTML创建的DOM的层次有一个清晰的认识，搞明白这些概念的含义，以及它们之间的嵌套关系。

CSS操作DOM的过程是先选择一个或一组元素，然后再修改这些元素的属性。通过CSS修改了元素后，比如修改了宽度或者在标记里插入一个伪元素，这些变化会立即在DOM中发生，并体现在页面上。

简言之，就是通过HTML标记来构建DOM，然后在页面初次加载和用户与页面交互时，使用CSS来修改DOM。