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