［笔记10］JavaScript DOM编程艺术_CSSDOM

三位一体的页面

• 结构层 由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：但是内嵌样式将表现信息与结构混杂在一起了。更好的方法是用一个外部样式表去设置样式。设置方式如下：

//这种方式已经不能再用DOM style属性检索出来了。即使将css文件中的内容提取出来，放在head部分也不能用style属性检索。

DOM style属性不能用来检索在外部CSS文件里声明的样式。在外部样式表里声明的样式不会进入style对象，在文档的部分里声明的样式也是如此。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

判断元素不是“下一个节点”，而是“下一个元素节点”。

function getNextElement(node){
    if(node.nodeType==1){
       return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);
    }
    return null;
}

使用addLoadEvent(styleHeaderSiblings)。

根据某种条件反复设置某种样式

例子：把表格型数据转换为HTML内容的理想标签当然是

在用CSS安排你的内容时，千万不要人云亦云地认为表格都是不好的。虽然利用表格来做页面布局不是好主意，但利用表格来显示表格数据却是理所当然。

Itinerary

When	Where
June 9th	Portland,OR
June 9th	Portland,WA
June 12th	Sacramento,CA

对应的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

现在如果你想把字体大小改成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

修改intro的样式声明如下：

.intro{
  font-weight:bold;
  font-size:1.4em;
}

这个技巧只有一个不足：通过className属性设置某个元素的class属性时将它替换（而不是追加）改元素原有的class设置。

如果要使用追加效果，可以利用字符串拼接操作，把新的class设置追加到className属性上，但是需要注意的是，追加的时候，前面需要加空格。

This is not a true story

如在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);
    }
}