JavaScript DOM操作表格及樣式

 一 操作表格

<table>標簽是HTML中結構最為復雜的一個,我們可以通過DOM來創建生成它,或者HTMLDOM來操作它;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // 使用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');   tr.appendChild(th1); th1.appendChild(document.createTextNode('姓名')); tr.appendChild(th2); th2.appendChild(document.createTextNode('年齡'));   document.body.appendChild(table);

// 表格較為復雜,層次也多,使用之前的DOM來獲取某個元素會比較麻煩;推薦使用HTMLDOM;
HTMLDOM 屬性和方法介紹
屬性或方法 說明
caption 保存著<caption>元素的引用;
tBodies 保存著<tbody>元素的HTMLCollection集合;
tFoot 保存著對<tfoot>元素的引用;
tHead 保存著對<thead>元素的引用;
rows 保存著對<tr>元素的HTMLCollection集合;
createTHead() 創建<thead>元素,並返回引用;
createTFoot() 創建<tfoot>元素,並返回引用;
createCpation() 創建<caption>元素,並返回引用;
deleteTHead() 刪除<thead>元素;
deleteTFoot() 刪除<tfoot>元素;
deleteCaption() 刪除<caption>元素;
deleteRow(pos) 刪除指定的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

<tbody>元素添加的屬性和方法
rows 保存著<tbody>元素中行的HTMLCollection;
deleteRow(pos) 刪除指定位置的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

<tr>元素添加的屬性和方法
cells 保存著<tr>元素中單元格的HTMLCollectioin集合;
deleteCell(pos) 刪除指定位置的單元格;
insertCell(pos) 向cells集合的指定位置插入一個單元格,並返回引用;

// HTMLDOM獲取表格的<caption>
alert(table.caption.innerHTML); // 獲取caption的內容;

// PS:在一個表格中<thead>和<tfoot>是唯一的,只能有一個;
// 而<tbody>不是唯一的,可以是多個,這樣導致最後返回的<thead>和<tfoot>是元素引用;而<tbody>是元素集合;

 

二 操作樣式

CSS作為(X)HTML的輔助,可以增強頁面的顯示效果,但不是每個浏覽器都能支持最新的CSS能力;
CSS的能力和DOM級別密切相關,所以需要檢測當前浏覽器的支持CSS能力的級別;
在HTML中定義樣式的方式有3種:
(1).使用style特性定義針對特定元素的樣式;
(2).使用<style/>元素定義嵌入式樣式;
(3).通過<link/>元素包含外部樣式表文件;1 // DOM1級實現了最基本的文檔處理,DOM2和DOM3在這個基礎上增加了更多的交互能力;
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'));

1.訪問元素的樣式

(1).style特性/對象
// 任何HTML元素標簽都會有一個通用的屬性:style,它會返回CSSStyleDeclaration對象;
CSS屬性及JavaScript調用
CSS屬性 JavaScript調用
color style.color
font-size style.fontSize
float style.cssFloat(非IE)
float style.styleFloat(IE)
var box = document.getElementById('box');
box.style; // CSSStyleDecaration;
box.style.color; // red;
box.style.fontSze; // 20px;
// 兼容IE的float操作;
typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

DOM2級樣式規范為style對象定義屬性和方法
屬性或方法 說明
cssText 訪問或設置style中的CSS代碼;
box.style.cssText; // 獲取CSS代碼;
// PS:style屬性僅僅只能獲取行內的CSS樣式,對於另外兩種形式內聯<style>和鏈接<link>方法則無法獲取到;

(2).計算後的樣式:getComputedStyle/currentStyle
// 雖然可以通過style來獲取單一值的CSS樣式,但對於復合值的樣式信息,就需要通過計算樣式來獲取;
// DOM2級樣式,window對象下提供了getComputedStyle()方法:接收兩個參數,需要計算的樣式元素,和偽類(:hover);如果沒有偽類,則null;
// getComputedStyle()方法返回一個CSSStyleDeclaration對象;(與style屬性的類型相同);其中包含當前元素的所有計算的樣式;
// 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(sytle.fontFamily); // 計算顯示復合的樣式值;
// PS:border屬性是一個綜合屬性,所以它在Chrome顯示了,Firefox為空,IE為undefined;
// 所以,DOM在獲取CSS的時候,最好采用完整寫法兼容性最好;比如:border-top-color;

2.操作樣式表

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // 使用style屬性可以設置行內的CSS樣式,而通過id和class調用是最常用的方法; box.className = 'red'; // 通過className關鍵字來設置樣式; // 添加多個className函數: // 判斷是否存在這個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屬性,僅僅只能獲取和設置行內的樣式; // 然後學習的getComputedStyle和currentStyle,只能獲取卻不能設置;

(1).獲得CSSStyleSheet
// CSSStyleSheet類型可以通過<link>元素和<style>元素包含的樣式表;
document.implementation.hasFeature('StyleSheet','2.0'); // 是否支持DOM2級樣式表;
document.getElementsByTagName('link')[0]; // HTMLLinkElement;
document.getElementsByTagName('style')[0]; // HTMLStyleElement;
// 這兩個元素本身返回的是HTMLLinkElement和HTMLStyleElement類型;但CSSStyleSheet類型更加通用一些;
// 得到這個類型非IE使用sheet