JavaScript学习9：DOM操作表格及样式

DOM在操作生成HTML上，还是比较简单明了的。不过，由于浏览器总是存在兼容和陷阱，导致最终的操作就不是那么简单方便了。那本文今天就来了解一下DOM如何操作表格和样式。

一 操作表格

<table>标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTML DOM来操作它。

下面我们就使用DOM来创建一个表格：

<span style="font-size:18px;">window.onload=function(){
	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('年龄'));

	tr.appendChild(th3);
	th3.appendChild(document.createTextNode('性别'));

	document.body.appendChild(table);
};</span>

运行一下代码，效果如下

二 操作样式

CSS作为HTML的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的CSS能力。CSS的能力和DOM级别密切相关，所以我们有必要检测当前浏览器支持的CSS能力级别。

DOM1级实现了最基本的文档处理，DOM2和DOM3在这个基础上增加了更多的交互能力，这里我们主要讨论CSS，DOM2增加了CSS编程访问方式和改变CSS样式信息。

1访问元素的样式

任何HTML元素标签都会有一个通用的属性style。它会返回CSSStyleDeclaration对象。下面我们看几个最常见的行内style样式的访问方式。

虽然可以通过style来获取单一值的CSS样式，但是对于复合值的样式信息，就需要通过计算样式来获取。DOM2级样式，window对象下提供了getComputedStyle()方法。接受两个参数，需要计算的样式元素，第二个伪类（：hover），如果没有伪类，就填null。

2操作样式表

使用style属性可以设置行内的CSS样式，而通过id和class调用时最常用的方法。之前我们使用style属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了，后来我们接触到了getComputedStyle和currentStyle，这只能获取却无法设置。

CSSStyleSheet类型表示通过<link>元素和<style>元素包含的样式表。

这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型，但是CSSStyleSheet类型更加通用一些，得到这个类型非IE使用sheet属性，IE使用styleSheet

var sheet=link.sheet||link.styleSheet;

还有我们可以通过CSSRules属性（非IE）和rules属性（IE），获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。

Varrules=sheet.cssRules||sheet.rules;

总结：三种操作CSS的方法，第一种style行内，可读可写；第二种行内、内联和链接，使用getComputedStyle或者currentStyle，可读不可写；第三种CSSRules或rules，内联和链接可读可写。