9、掌握CSS-DOM：构建高效交互式网页

掌握CSS-DOM：构建高效交互式网页

1. 三层结构：结构、表现、行为的分离

在现代网页开发中，理解并合理运用“结构、表现、行为”的分离原则至关重要。这不仅有助于提高代码的可维护性和可扩展性，还能显著提升用户体验。

结构（Structure）

结构层是网页的基础，通常由HTML或XHTML定义。标签（如 <p> 、 <div> 等）用于描述内容的语义。例如：

<p>An example of a paragraph</p>

这段代码明确表示这是一段文本内容，但并未规定如何显示。

表现（Presentation）

表现层负责定义网页的外观，主要通过CSS实现。CSS可以用来设置字体、颜色、布局等样式。例如：

p {
  color: grey;
  font-family: "Arial", sans-serif;
}

这段代码规定了段落的文本颜色为灰色，字体为Arial或类似的无衬线字体。

行为（Behavior）

行为层定义了网页的交互功能，通常由JavaScript和DOM共同完成。例如，可以通过JavaScript为段落添加点击事件：

var paras = d