19.DOM操做表格及样式

DOM操做表格及样式

学习要点：
1.操做表格
2.操做样式

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

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

//须要操做table
<table border = "1" width = "300">
<caption>人员表</caption>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>21</td>
</tr>
</tbody>
</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来获取
和建立这个相同表格。

HTML DOM中，给这些元素标签提供一些属性和方法

属性和方法 说明
caption 保存着<caption>元素的引用
tBodies 保存着<tbody>元素的HTMLCollection集合
tFoot 保存着对<tFoot>元素的引用
tHead 保存着对<tHead>元素的引用
rows 保存着对<tr>元素的HTMLCollection集合
createTHead() 建立<thead>元素，并返回引用
createTFoot() 建立<tfoot>元素，并返回引用
createCaption() 建立<caption>元素，并返回引用
deleteTHead() 删除<thead>元素
deleteTFoot() 删除<tfoot>元素
deleteCaption() 删除<caption>元素
deleteRow() 删除指定的行
insertRow(pos) 向rows集合中的指定位置插入一行

<tbody>元素添加的属性和方法
属性或方法 说明
rows 保存着<tbody>元素中行的HTMLCollection
deleteRow(pos) 删除指定位置的行
insertRow(pos) 向rows集合中指定位置插入一行，并返回引用

<tr>元素添加的属性和方法
属性或方法 说明
cells 保存着<tr>元素中单元格的HTMLCollection
deleteCell(pos) 删除指定位置的单元格
insertCell(pos) 向cells集合的指定位置插入一个单元格，并返回引用

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

//使用HTMLDOM来获取表格元素
var table = document.getElementsByTagName('table')[0]; //获取table引用

//按照以前的DOM节点方法获取<caption>
alert(table.children[0],innerHTML); //获取caption的内容

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

//按HTMLDOM来获取表格的<caption>
alert(table.caption.innerHTML); //获取caption的内容

//按HTMLDOM来获取表头表尾<thead>、<tfoot>
alert(table.tHead); //获取表头
alert(table.tFoot); //获取表尾

//按HTMLDOM来获取表体
alert(table.tBodies); //获取表体的集合

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

//按HTMLDOM来获取表格的行数
alert(table.rows.length); //获取行数的集合，数量

//获取表格主体里的行数
alert(table.tBodies[0].rows.length); //获取主体的行数集合，数值

//获取表格主体内容第一行的单元格数量（tr）
alert(table.tBodies[0].rows[0].cells.length); //获取第一行的单元格数量

//获取表格主体内容第一行第一个单元格的内容（td）
alert(table.tBodies[0].rows[0].cells[0].innerHTML);

//删除标题、表头、表尾、行、单元格
table.deleteCaption(); //删除标题
table.deleteTHead(); //删除<thead>
table.tBodies[0].deleteRow[0]; //删除<tr>一行
table.tBodies[0].rows[0].deleteCell(0);//删除<td>一个单元格

//按HTMLDOM建立一个表格
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.innerRow(0);

var td = tr.insertCell(0);
td.appendChild(document.createTextNode('数据'));

var td2 = tr.insertCell(1);
td2.appendChild(document.createTextNode('数据'));

document.body.appendChild(table);

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

 

 

 

 

 

 

 

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

 

DOM一致型检测
功能 版本号 说明
Core 1.0、2.0、3.0 基本的DOM用于表现文档节点树
XML 1.0、2.0、3.0 Core的XML扩展，添加了对CDATA等支持
HTML 1.0、2.0 XML的THML扩展，添加了对HTML特有元素支持
Views 2.0 基于某些样式完成文档的格式化
StyleSheets 2.0 将样式关联到文档
CSS 2.0 对层叠样式表1级的支持
CSS2 2.0 对层叠样式表2级的支持
Events 2.0 常规的DOM事件
UIEvents 2.0 用户界面事件
MouseEvents 2.0 由鼠标引起的事件（如：click）
MutationEvents 2.0 DOM树变化时引起的事件
HTMLEvents 2.0 HTML4.01事件
Range 2.0 用户操做DOM树中某个范围的对象和方法
Traversal 2.0 遍历DOM树的方法
LS 3.0 文件与DOM树之间的同步加载和保存
LS-Async 3.0 文件与DOM树之间的同步加载和保存
Valuidation 3.0 在肯定有效的前提下修改DOM树的方法

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

PS：这种检测方案在IE浏览器上不精确，IE6中，hasFeature()方法只为HTML和版本1.0返回true，其余全部功能
均返回false。但IE浏览器仍是支持最经常使用的CSS2模块。

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

PS：行内就是在标签里的style属性添加的样式，内联就是<style>标签里书写的样式，连接就是经过<link href>
标签连接到的样式

CSS属性及JavaScript调用

CSS属性 JavaScript调用
color style.color
font.size style.fontSize
float 非IE：style.cssFloat
float IE：style.styleFloat

<div id="box" style="color:red;background:#ccc;font-size:20px;float:right">测试Div</div>
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';

DOM2级样式规范为style定义了一些属性和方法
属性和方法 说明
cssText 访问或设置style中的CSS代码
length CSS属性的数量
parentRule CSS信息的CSSRule对象
getPropertyCSSValue(name) 返回包含给定属性值的CSSValue对象
getPropertyPriority(name) 若是设置了!important，则返回，不然返回空字符串
item(index) 返回指定位置CSS属性名称
removeProperty(name) 从样式中删除指定属性
setProperty(name,v,p) 给属性设置相应的值，并加上优先权

 

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属性。
<style>
#box{
color : red;
border : 1px solid red;
font-family : "微软雅黑";
font-size :20px;
}
</style>
var box = document.getElementById('box');
var style = window.getComputedStyle?window.getComputedStyle(box,null) : null || box.currentStyle;

alert(style.color);
alert(style.border);
alert(style.fontFamily);
alert(style.fontSize);
alert(box.style.fontFamily); //空

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

PS：计算式的获取，不只仅能够获取没有设置的默认样式，也能够获取行内，内联和连接
为何能够获取内联和连接呢？ 由于无论你在哪里设置CSS，最终会驻留咋i浏览器的计算样式里

 

2.操做样式表
使用style属性能够设置行内的CSS样式，而经过id和class调用是最经常使用的方法。
box.id = 'pox'; //把ID改变会带来灾难性的问题
box.className = 'red'; //经过className关键字来设置样式

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

//判断一个class是否存在
//若是有，返回true，没有返回false
//box.className的字符串为'aaa bbb'
//element.className表示'aaa bbb'
//match是正则表达式里的一个方法
//若是element.className ‘aaa bbb’里面有正则的字符串‘aaa’
//match就是查找字符串‘aaa bbb’里面是否有/aaa/，若是有，就把这个字符返回
//element.className没有ccc，那么就返回null
//转换成布尔值
//问题，以一个aa也能返回true
//aa不是aaa，因此这个正则不精确
//new RegExp('(\\s|^)'+cName+'(\\s|$)')经过这个正则，咱们严格精确的找到了指定的class

//检查class是否存在
function hasClass(element , cName){
return !!element.className.match(new RegExp('(\\s|^)'+cName+'(\\s|$)'));
}
//添加一个class
function addClass(element,cName){
if(!hasClass(element,cName)){
element.className +=' ' + cName;
}
}
//移除一个class
function removeClass(element,cName){
if(hasClass(element , cName)){
element.className = element.className.replace(new RegExp('(\\s|^)'+cName+'(\\s|$)'), '');
}
}

 

 

//判断是否存在这个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；

<link href="css/css.css" type="text/css"></link>

//css.css
#box{

}

var link = document.getElementsByTagName('link')[0]; //获得link标签对象
var sheet = link.sheet || link.styleSheet; //获得CSSStyleSheet，表示连接的CSS样式表对象
var sheet = document.styleSheets; //获得的是StyleSheetList集合

属性或方法 说明
disabled 获取和设置样式表是否被禁用
href 若是是经过<link>包含的，则样式表为URL，不然为null
media 样式表支持的全部媒体类型的集合
ownerNode 指向拥有当前样式表节点的指针
parentStyleSheet @import导入的状况下，获得父CSS对象
title owerNode中title属性的值
type 样式表类型字符串
cssRules 样式表包含样式规则的集合，IE不支持
ownerRule @import导入的状况下，指向表示导入的规则，IE不支持
deleteRule(index) 删除cssRules集合中指定位置的规则，IE不支持
insertRule(rule , index) 向cssRules集合中指定位置插入rule字符串，IE不支持

 

sheet.disabled; //false，可设置为true
sheet.href; //css的URL
sheet.media; //MediaList，集合
sheet.media[0]; //第一个media的值
sheet.title; //获得title属性的值
sheet.cssRules; //CSSRuleList，样式表规则集合
alert(sheet.cssRules[0].cssText); //获得第一个规则的文本内容
alert(sheet.cssRules[0].selectorText);//获得第一个规则的选择符，就是#box
sheet.deleteRule(0); //删除第一个样式规则
sheet.insertRule("body {background-color : red}" , 0); //在第一个位置添加一个样式规则

PS：除了几个不用和IE不支持的咱们忽略了，还有三个有IE对应的另外一种方式：
sheet.rules; //代替cssRules的IE版本
sheet.removeRule(0); //代替deleteRule的IE版本
sheet.addRule("body" ,"background-color : red" , 0); //代替insertRule的IE版本

//跨浏览器兼容获取rules
var rules = sheet.cssRules || sheet.rules;

//跨浏览器兼容添加第一条规则
function insertRule(sheet , selectorText ,cssText , position){
if(sheet.insertRule){
sheet.insertRule('selectorText + '{' +cssText+ '}' , position);
}else if(sheet.addRule){
sheet.addRule(selectorText , cssText , position);
}
}

//跨浏览器兼容删除第一条规则
function deleteRule(sheet , position){
if(sheet.deleteRule){
sheet.deleteRule(position);
}else if(sheet.removeRule){
sheet.removeRule(position);
}
}

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

CSSStyleRule可使用的属性
属性 说明
cssText 获取当前整条规则对应的文本，IE不支持
parentRule @import导入的返回测试null，IE不支持
parentStyleSheet 当潜规则的样式表，IE不支持
selectorText 获取当前规则的选择文本
style 返回CSSStyleDeclaration对象，能够获取和设置样式
type 表示规则的常量值，对于样式规则，值为1，IE不支持

rule.cssText; //当前规则的样式文本
rule.selectorText; //#box，样式的选择符
rule.style.color; //red，获得具体样式值
PS：Chrome浏览器在本地运行时会出现问题，rules会变成null，只要把它放到服务器上容许便可正常。

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