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，內聯和連接可讀可寫。