JavaScript的DOM操做表格及样式

DOM 在操做生成HTML 上，仍是比较简明的。不过，因为浏览器老是存在兼容和陷阱，
致使最终的操做就不是那么简单方便了。本章主要了解一下DOM 操做表格和样式的一些知
识。

一．操做表格
<table>标签是HTML 中结构最为复杂的一个，咱们能够经过DOM 来建立生成它，或
者HTML DOM 来操做它。(PS：HTML DOM 提供了更加方便快捷的方式来操做HTML，有
手册)。

//须要操做的table
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计：N</td>
</tr>
</tfoot>
</table>

//使用DOM 来建立这个表格
var table = document.createElement('table');
table.border = 1;
table.width = 300;
var caption = document.createElement('caption');
table.appendChild(caption);
caption.appendChild(document.createTextNode('人员表'));
var thead = document.createElement('thead');
table.appendChild(thead);
var tr = document.createElement('tr');
thead.appendChild(tr);
var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th');
tr.appendChild(th1);
th1.appendChild(document.createTextNode('姓名'));
tr.appendChild(th2);
th2.appendChild(document.createTextNode('年龄'));
document.body.appendChild(table);

PS：使用DOM 来建立表格其实已经没有什么难度，就是有点儿小烦而已。下面咱们再
使用HTML DOM 来获取和建立这个相同的表格。

PS：由于表格较为繁杂，层次也多，在使用以前所学习的DOM 只是来获取某个元素会
很是难受，因此使用HTML DOM 会清晰不少。

//使用HTML DOM 来获取表格元素
var table = document.getElementsByTagName('table')[0]; //获取table 引用
//按照以前的DOM 节点方法获取<caption>
alert(table.children[0].innerHTML); //获取caption 的内容

PS：这里使用了children[0]自己就忽略了空白，若是使用firstChild 或者childNodes[0]
须要更多的代码。

//按HTML DOM 来获取表格的<caption>
alert(table.caption.innerHTML); //获取caption 的内容
//按HTML DOM 来获取表头表尾<thead>、<tfoot>
alert(table.tHead); //获取表头
alert(table.tFoot); //获取表尾
//按HTML DOM 来获取表体<tbody>
alert(table.tBodies); //获取表体的集合

PS：在一个表格中<thead>和<tfoot>是惟一的，只能有一个。而<tbody>不是惟一的能够
有多个，这样致使最后返回的<thead>和<tfoot>是元素引用，而<tbody>返回的是元素集合。

//按HTML DOM 来获取表格的行数
alert(table.rows.length); //获取行数的集合，数量
//按HTML DOM 来获取表格主体里的行数
alert(table.tBodies[0].rows.length); //获取主体的行数的集合，数量
//按HTML DOM 来获取表格主体内第一行的单元格数量(tr)
alert(table.tBodies[0].rows[0].cells.length); //获取第一行单元格的数量
//按HTML DOM 来获取表格主体内第一行第一个单元格的内容(td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML); //获取第一行第一个单元格的内容
//按HTML DOM 来删除标题、表头、表尾、行、单元格
table.deleteCaption(); //删除标题
table.deleteTHead(); //删除<thead>
table.tBodies[0].deleteRow(0); //删除<tr>一行
table.tBodies[0].rows[0].deleteCell(0); //删除<td>一个单元格
//按HTML DOM 建立一个表格
var table = document.createElement('table');
table.border = 1;
table.width = 300;
table.createCaption().innerHTML = '人员表';
//table.createTHead();
//table.tHead.insertRow(0);
var thead = table.createTHead();
var tr = thead.insertRow(0);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('数据'));
var td2 = tr.insertCell(1);
td2.appendChild(document.createTextNode('数据2'));
document.body.appendChild(table);

PS：在建立表格的时候<table>、<tbody>、<th>没有特定的方法，须要使用document
来建立。也能够模拟已有的方法编写特定的函数便可，例如：insertTH()之类的。

二．操做样式
CSS 做为(X)HTML 的辅助，能够加强页面的显示效果。但不是每一个浏览器都能支持最
新的CSS 能力。CSS 的能力和DOM 级别密切相关，因此咱们有必要检测当前浏览器支持
CSS 能力的级别。
DOM1 级实现了最基本的文档处理，DOM2 和DOM3 在这个基础上增长了更多的交互
能力，这里咱们主要探讨CSS，DOM2 增长了CSS 编程访问方式和改变CSS 样式信息。

//检测浏览器是否支持DOM1 级CSS 能力或DOM2 级CSS 能力
alert('DOM1 级CSS 能力：' + document.implementation.hasFeature('CSS', '2.0'));
alert('DOM2 级CSS 能力：' + document.implementation.hasFeature('CSS2', '2.0'));

PS：这种检测方案在IE 浏览器上不精确，IE6 中，hasFeature()方法只为HTML 和版本
1.0 返回true，其余全部功能均返回false。但IE 浏览器仍是支持最经常使用的CSS2 模块。
1.访问元素的样式
任何HTML 元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration 对
象。下面咱们看几个最多见的行内style 样式的访问方式。

var box = document.getElementById('box'); //获取box
box.style.cssFloat.style; //CSSStyleDeclaration
box.style.cssFloat.style.color; //red
box.style.cssFloat.style.fontSize; //20px
box.style.cssFloat || box.style.styleFloat; //left，非IE 用cssFloat，IE 用styleFloat

PS：以上取值方式也能够赋值，最后一种赋值能够以下：

typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

 

box.style.cssText; //获取CSS 代码
//box.style.length; //3，IE 不支持
//box.style.removeProperty('color'); //移除某个CSS 属性，IE 不支持
//box.style.setProperty('color','blue'); //设置某个CSS 属性，IE 不支持

PS：Firefox、Safari、Opera9+、Chrome 支持这些属性和方法。IE 只支持cssText，而
getPropertyCSSValue()方法只有Safari3+和Chrome 支持。
PS：style 属性仅仅只能获取行内的CSS 样式，对于另外两种形式内联<style>和连接
<link>方式则没法获取到。

虽然能够经过style 来获取单一值的CSS 样式，但对于复合值的样式信息，就须要经过
计算样式来获取。DOM2 级样式，window 对象下提供了getComputedStyle()方法。接受两个
参数，须要计算的样式元素，第二个伪类(:hover)，若是没有没有伪类，就填null。

PS：IE 不支持这个DOM2 级的方法，但有个相似的属性可使用currentStyle 属性。

var box = document.getElementById('box');
var style = window.getComputedStyle ?
window.getComputedStyle(box, null) : null || box.currentStyle;
alert(style .color); //颜色在不一样的浏览器会有rgb()格式
alert(style .border); //不一样浏览器不一样的结果
alert(style .fontFamily); //计算显示复合的样式值
alert(box.style.fontFamily); //空

PS：border 属性是一个综合属性，因此他在Chrome 显示了，Firefox 为空，IE 为undefined。
所谓综合性属性，就是XHTML 课程里所的简写形式，因此，DOM 在获取CSS 的时候，最
好采用完整写法兼容性最好，好比：border-top-color 之类的。

2.操做样式表
使用style 属性能够设置行内的CSS 样式，而经过id 和class 调用是最经常使用的方法。

box.id = 'pox'; //把ID 改变会带来灾难性的问题
box.className = 'red'; //经过className 关键字来设置样式

在添加className 的时候，咱们想给一个元素添加多个class 是没有办法的，后面一个
必将覆盖掉前面一个，因此必须来写个函数：

//判断是否存在这个class
function hasClass(element, className) {
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//添加一个class，若是不存在的话
function addClass(element, className) {
if (!hasClass(element, className)) {
element.className += " "+className;
}
}
//删除一个class，若是存在的话
function removeClass(element, className) {
if (hasClass(element, className)) {
element.className = element.className.replace(
new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
}
}

以前咱们使用style 属性，仅仅只能获取和设置行内的样式，若是是经过内联<style>或
连接<link>提供的样式规则就迫不得已了，而后咱们又学习了getComputedStyle 和
currentStyle，这只能获取却没法设置。
CSSStyleSheet 类型表示经过<link>元素和<style>元素包含的样式表。

document.implementation.hasFeature('StyleSheets', '2.0') //是否支持DOM2 级样式表
document.getElementsByTagName('link')[0]; //HTMLLinkElement
document.getElementsByTagName('style')[0]; //HTMLStyleElement

这两个元素自己返回的是HTMLLinkElement 和HTMLStyleElement 类型，但
CSSStyleSheet 类型更加通用一些。获得这个类型非IE 使用sheet 属性，IE 使用styleSheet；

var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet || link.styleSheet; //获得CSSStyleSheet

 

sheet.disabled; //false，可设置为true
sheet.href; //css 的URL
sheet.media; //MediaList，集合
sheet.media[0]; //第一个media 的值
sheet.title; //获得title 属性的值
sheet.c***ules //C×××uleList，样式表规则集合
sheet.deleteRule(0); //删除第一个样式规则
sheet.insertRule("body {background-color:red}", 0); //在第一个位置添加一个样式规则

PS：除了几个不用和IE 不支持的咱们忽略了，还有三个有IE 对应的另外一种方式：

sheet.rules; //代替c***ules 的IE 版本
sheet.removeRule(0); //代替deleteRule 的IE 版本
sheet.addRule("body", "background-color:red", 0);//代替insertRule 的IE 版本

除了刚才的方法能够获得CSSStyleSheet 类型，还有一种方法是经过document 的
styleSheets 属性来获取。

document.styleSheets; //StyleSheetList，集合
var sheet = document.styleSheets[0]; //CSSStyleSheet，第一个样式表对象

为了添加CSS 规则，而且兼容全部浏览器，咱们必须写一个函数：

var sheet = document.styleSheets[0];
insertRule(sheet, "body", "background-color:red;", 0);
function insertRule(sheet, selectorText, cssText, position) {
//若是是非IE
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
//若是是IE
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, position);
}
}

为了删除CSS 规则，而且兼容全部浏览器，咱们必须写一个函数：

var sheet = document.styleSheets[0];
deleteRule(sheet, 0);
function deleteRule(sheet, index) {
//若是是非IE
if (sheet.deleteRule) {
sheet.deleteRule(index);
//若是是IE
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
}

经过C×××ules 属性(非IE)和rules 属性(IE)，咱们能够得到样式表的规则集合列表。这
样咱们就能够对每一个样式进行具体的操做了。

var sheet = document.styleSheets[0]; //CSSStyleSheet
var rules = sheet.c***ules || sheet.rules; //C×××uleList，样式表的规则集合列表
var rule = rules[0]; //CSSStyleRule，样式表第一个规则

rule.cssText; //当前规则的样式文本
rule.selectorText; //#box，样式的选择符
rule.style.color; //red，获得具体样式值

PS：Chrome 浏览器在本地运行时会出现问题，rules 会变成null，只要把它放到服务器
上容许便可正常。

总结：三种操做CSS 的方法，第一种style 行内，可读可写；第二种行内、内联和连接， 使用getComputedStyle 或currentStyle，可读不可写；第三种c***ules 或rules，内联和连接 可读可写。