DOM day6

DOM JavaScript

1. 三位一体的网页

网页其实由结构层、表现层和行为层三层信息构成的共同体。

1. 结构层（structural layer）

结构层由HTML或XHTML之类的标记语言负责创建。标签（tag），即尖括号里的单词，对网页内容的语义含义做出阐述。

2. 表示层（presentation layer）

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

3. 行为层（behavior layer）

行为层负责内容应该如何响应事情。主要由JavaScript语言和DOM负责完成。

网页的表示层和行为层总是存在的，即使未明确给出任何具体的指令也是如此。此时Web浏览器将应用默认样式和默认事件处理函数。

2. style属性

文档中的每个元素都是一个对象，每个对象又有各种各样的属性。
style属性包含着元素的样式，查询这个属性将返回一个对象而不是一个简单的字符串。样式都存放在这个style对象的属性里：

element.style.property

每个元素都是一个对象，每个元素都有一个style属性，它们也是一个对象。

1. 获取样式

当需要引用一个中间带减号的CSS属性时，DOM要求使用驼峰命名法。即从第二个单词开始首字母大写。如font-family变成DOM属性fontFamily。
使用CSS速记属性，可以把多个样式组合在一起写成一行。
例如

<p id="example" style="color: grey; font: 12px 'Arial',sans-serif"

CSS font-size属性被设置为12px，CSSfont-family属性被设置为'Arial'，sans-serif。
DOM能够解析这些速记属性。

内嵌样式
style属性获取样式有很大的局限性。
style属性只能返回内嵌样式。换句话说，只有把CSS style属性插入到标记里，才能用DOM style属性查询。

2. 设置样式

style对象的各个属性都是可以读写的，甚至可以用赋值操作来更新样式;

element.style.property = value

注：style对象的属性值永远是一个字符串，所以等号右边的值必须放在引号里。

3. 什么时候使用DOM脚本设置样式

1. CSS声明样式

主要有三种做法：
第一种是标签元素（如p元素）统一的声明样式：

p{
    font-size: 1em;
}

第二种是为特定的class属性的所有元素统一声明样式：

.fineprint{
    font-size: .8em;
｝

第三种是为有独一无二的id属性的元素单独声明样式：

#info{
    font-size: 1.2em;
}

2.根据元素在节点树的位置来设置样式

CSS无法根据元素之间的相对位置关系来找到某个特定的元素，而DOM能轻而易举地找到。

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

4. 响应事件

CSS提供的:hover等伪class属性允许我们根据HTML元素的状态来改变样式。DOM可以通过onmouseover等事件对HTML元素状态做出响应。
什么时候应该使用:honver属性，什么时候应该是用onmouseover事件。最简单的答案是选择最容易实现的方法。
例如只是想让链接在鼠标指针悬停在上面时改变颜色， 那就应该选用CSS：

a:hover{
    color:#c60;
}

使用DOM一样能完成：

function highlightRows() {
    if (!document.getElementsByTagName) return false;
    var rows = document.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onmouseover = function() {
            this.style.fontWeight = "bold";
        }
        rows[i].onmouseout = function() {
            this.style.fontWeight = "normal";
        }
    }
}

4. className属性

前面一直都在使用DOM直接设置或修改样式。这种做法让行为层干表示层的活。
一种简明的解决方法是，与其使用DOM直接改变某个元素的样式，不如通过JavaScript代码去更新这个元素的class属性。
可以引用外部CSS样式表，在其中有针对某个类的声明。然后用setAttribute方法去完成设置：

element.setAttribut("class","intro")

更简单的方法是更新className属性。className属性是一个可读/可写的属性，凡是元素节点都有这个属性。
可用className属性得到一个元素的class属性。

element.className = value

这种技巧的不足：通过className属性设置某个元素的class属性时，将替换该元素原有的class设置。
所以可以用字符串拼接操作，把新的class设置值追加到className属性上（注：intro的第一个字符是空格）：

element.className += " intro";

抽象，把一个非常具体的东西改进成为一个较为通用的东西的过程。