三位一体的页面
- 结构层 由HTML或XHTML之类的标记语言负责创建。
- 表示层 由CSS负责完成，描述页面内容如何呈现。
- 行为层 负责内容应该如何响应事件这一问题。
分离
在所有的产品设计活动中，选择最使用的工具去解决问题是最基本的原则。
使用XHTML去搭建文档的结构
使用CSS去设置文档的呈现效果
使用DOM脚本去实现文档的行为
不过三种技术之间存在着一些潜在的重叠区域。
style属性
文档中每个元素都是一个对象，每个元素的style属性，它们也是一个对象。
注意:
- 类似属性font-family,这个属性的获取方式与color属性值略有不同。在font和family之间的连词富豪，在JS中会被解释为减号。当你需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。CSS属性font-famliy变成DOM属性fontFamily。
- 在某些浏览器里，color属性会以RGB的格式显示出来。
使用CSS速记属性，你可以把多个样式组合在一起写成一行。
内嵌样式
style属性只能返回内嵌样式。
PS：但是内嵌样式将表现信息与结构混杂在一起了。更好的方法是用一个外部样式表去设置样式。设置方式如下：
<link rel="stylesheet" media="screen" href="styles/styles.css"/>
//这种方式已经不能再用DOM style属性检索出来了。即使将css文件中的内容提取出来，放在head部分也不能用style属性检索。
DOM style属性不能用来检索在外部CSS文件里声明的样式。在外部样式表里声明的样式不会进入style对象，在文档的<head>部分里声明的样式也是如此。style对象只包含在HTML代码里用style属性声明的样式。但这几乎没有实用价值，因为样式应该与标记分离开来。
设置样式
style对象的各个属性都是可读写的。不仅可以通过某个元素的style属性去获取样式，还可以通过它去更新样式。element.style.property=value
如下所示：
var para=document.getElementById("example");
para.style.color="black";
何时该用DOM脚本设置样式
用DOM设置样式很容易，但你能做什么事并不意味着你应该做什么事。在绝大多数场合，还是应该使用CSS去声明样式。
根据元素在节点树里的位置来设置样式
- 标签元素
p{
font-size:1em;
}
- 为特定class属性的所有元素统一声明样式
.fineprint{
font-size:.8em;
}
- 为有独一无二的id属性的元素单独声明样式
#intro{
font-size:1.23m;
}
- 也可以为有类似属性的多个元素声明样式
input[type*="text"]{
font-size:1.2em;
}
在现代浏览器中，甚至可以根据元素的位置声明样式：
p:first-of-type{
font-size:2em;
font-weight:bold;
}
CSS还无法根据元素之间的相对位置关系找出某个特定的元素，但这对DOM来说不是什么难事。
getElementByTagName方法把所有的h1元素找出来
var headers=document.getElementsByTagName("h1");
var elem;
for(var i=0;i<headers.length;i++){
elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight="bold";
elem.style.fontSize="1.2em";
}
判断元素不是“下一个节点”，而是“下一个元素节点”。
function getNextElement(node){
if(node.nodeType==1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
使用addLoadEvent(styleHeaderSiblings)。
根据某种条件反复设置某种样式
例子：把表格型数据转换为HTML内容的理想标签当然是<table>
在用CSS安排你的内容时，千万不要人云亦云地认为表格都是不好的。虽然利用表格来做页面布局不是好主意，但利用表格来显示表格数据却是理所当然。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="itinerary.css">
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>
对应的css文件是：
body{
font-family: "Helvetica","Arial",sans-serif;
background-color: #fff;
color: #000;
}
table{
margin: auto;
border: 1px solid #699;
}
caption{
margin: auto;
padding: .2em;
font-size: 1.2em;
font-weight: bold;
}
th{
font-weight: normal;
font-style: italic;
text-align: left;
border: 1px dotted #699;
background-color: #9cc;
color: #000;
}
th,td{
width: 10em;
padding: .5em;
}
//设置奇偶行的颜色
tr:nth-child(odd){
background-color: #ffc;
}
tr:nth-child(even){
background-color: #fff;
}
响应事件
何时应该使用CSS来设置样式，何时应该使用DOM来设置样式并不总是那么容易决定。如果问题涉及需要根据某个事件来改变样式，就更难做出决定了。
最简单的答案是选择最容易实现的方式。
CSS提供:hover等伪class属性允许我们根据HTML元素的状态来改变样式。DOM也可以通过onmouseover等事件对HTML元素的状态变化做出响应。很难判断何时使用:hover，何时使用onmoouseover事件。那就使用最容易实现的方式。
决定采用纯粹的CSS来解决，还是利用DOM来设置样式。需要考虑下面的因素。
- 这个问题最简单的解决方案是什么；
- 哪种解决方案会得到更多浏览器的支持。
如果想改变某个元素的呈现效果，使用CSS；如果想改变某个元素的行为，使用DOM；如果你想根据某个元素的行为去改变它的呈现效果，请运用你的智慧，这个问题没有放之四海皆准的答案。
className属性
使用DOM直接设置或修改样式，这种做法让“行为层”干“表现层”的活，并不是理想的工作方式。
这里有一种简明的解决方案：与其使用DOM直接改变某个元素的样式，不如通过JS代码去更新这个元素的class属性。
PS:Get到新的知识点了。下面来从0到1的举个例子来把这个过程说清楚。
上面举过一个例子，这个例子的意思是把h1下面的一个元素节点字体的改变。
var headers=document.getElementsByTagName("h1");
var elem;
for(var i=0;i<headers.length;i++){
elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight="bold";
elem.style.fontSize="1.2em";
}
现在如果你想把字体大小改成1.4em的，就必须去改上面这个函数。
但是，如果刚开始的时候这个属性值是写在css文件中的呢。
.intro{
font-weight:bold;
font-size:1.2em;
}
你只要通过setAttribute将className的属性值更新一下，就能达到相同的效果。
elem.setAttribute("class","intro");
更简单的办法是更新className属性。className属性是一个可读／可写的属性，凡元素节点都有这个属性。
element.className=value;
最终的写法：
var headers=document.getElementsByTagName("h1");
var elem;
for(var i=0;i<headers.length;i++){
elem=getNextElement(headers[i].nextSibling);
elem.class="intro";
}
修改intro的样式声明如下：
.intro{
font-weight:bold;
font-size:1.4em;
}
这个技巧只有一个不足：通过className属性设置某个元素的class属性时将它替换（而不是追加）改元素原有的class设置。
如果要使用追加效果，可以利用字符串拼接操作，把新的class设置追加到className属性上，但是需要注意的是，追加的时候，前面需要加空格。
<p class="disclaimer">This is not a true story</p>
如在disclaimer上追加introelem.className+=" intro";
需要给一个元素追加新的class时，可以按照以下步骤操作：
- 检查className属性的值是否为null
- 如果是，把新的class设置值直接赋值给className属性
- 如果不是，把一个空格和新的class设置值追加到className属性上去。
封装成addClass函数如下所示。
function addClass(element,value){
if(!element.className){
element.className=value;
}else{
newClassName=element.className;
newClassName+=" ";
newClassName+=value;
element.className=newClassName;
}
}
对函数进行抽象
上面的styleHeaderSiblings函数，只适用于h1元素，而且className也是硬编码在里面。我们可以将它改为更通用的函数。
function styleElementSiblings(tag,theclass){
if(!document.getElementByTagName)return false;
var elems=document.getElementByTagName(tag);
var elem;
for (var i = 0; i < elems.length; i++) {
elem=getNextElement(elems[i].nextSibling);
addClass(elem,theclass);
}
}
