CSS-DOM介绍

三位一体的网页:

我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体:

1、结构层:

结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些出现在html标签里面的单词,对网页内容的语义含义作出了如下描述，例如，<p>This is a paragraph</p>标签表达了这样一个语意:这是一个文本段落。但这些标签并不包含任何关于段落如何显示的信息。

2、表示层:

表示层由CSS负责完成。CSS描述页面内容应该如何呈现。

3、行为层:

行为层负责内容应该如何响应事件这一问题,这是JavaScript语言和DOM所主宰的领域.

注意:网页的显示层和行为层总是存在的即使创建的网页为给定任何具体的指令也是如此。此时Web浏览器将应用它给出的默认样式和默认事件处理函数,比如:浏览器会在呈现文本段元素时,留出默认页边距,当用户把鼠标指针悬停在某个元素上方时，有时候浏览器会弹出一个显示着该元素title属性值的弹出框等等。

在所有的产品设计过程中,选择最适用的工具去解决问题是最基本的原则。具体到网页设计工作,这意味着:
我们将使用(X)HTML去搭建文档的结构；

使用CSS去设置文档的呈现效果；

使用DOM脚本去实现文档的行为；

但是在这三种技术之间存在着一些潜在的重叠区域,相信大家都会遇到过,用DOM可以改变结构层的结构,诸如createElement()和appendChild()之类的方法允许你动态创建标记，表现层可以用:hover和：focus之类的伪类触发事件来改变元素的展示效果。改变元素的呈现效果当然是表示层的"势力范围",但响应用户触发的事件确实行为层的领地。行为层和表示层的这种重叠形成了一种灰色地带。确实,CSS正在利用伪类走进DOM的领地,但DOM也有反击之道。你也可以利用DOM来给元素设置样式。