一 操作表格

<table>標(biāo)簽是HTML中結(jié)構(gòu)最為復(fù)雜的一個(gè),我們可以通過(guò)DOM來(lái)創(chuàng)建生成它,或者HTMLDOM來(lái)操作它;

// 使用DOM來(lái)創(chuàng)建表格; 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);

// 表格較為復(fù)雜,層次也多,使用之前的DOM來(lái)獲取某個(gè)元素會(huì)比較麻煩;推薦使用HTMLDOM;
HTMLDOM 屬性和方法介紹
屬性或方法 說(shuō)明
caption 保存著<caption>元素的引用;
tBodies 保存著<tbody>元素的HTMLCollection集合;
tFoot 保存著對(duì)<tfoot>元素的引用;
tHead 保存著對(duì)<thead>元素的引用;
rows 保存著對(duì)<tr>元素的HTMLCollection集合;
createTHead() 創(chuàng)建<thead>元素,并返回引用;
createTFoot() 創(chuàng)建<tfoot>元素,并返回引用;
createCpation() 創(chuàng)建<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集合的指定位置插入一個(gè)單元格,并返回引用;

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

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

二 操作樣式

 CSS作為(X)HTML的輔助,可以增強(qiáng)頁(yè)面的顯示效果,但不是每個(gè)瀏覽器都能支持最新的CSS能力;
 CSS的能力和DOM級(jí)別密切相關(guān),所以需要檢測(cè)當(dāng)前瀏覽器的支持CSS能力的級(jí)別;
 在HTML中定義樣式的方式有3種:
 (1).使用style特性定義針對(duì)特定元素的樣式;
 (2).使用<style/>元素定義嵌入式樣式;
 (3).通過(guò)<link/>元素包含外部樣式表文件;1 // DOM1級(jí)實(shí)現(xiàn)了最基本的文檔處理,DOM2和DOM3在這個(gè)基礎(chǔ)上增加了更多的交互能力;
 DOM2增加了CSS編程訪問(wèn)方式和改變CSS樣式信息;
 檢測(cè)瀏覽器是否支持DOM1級(jí)CSS能力或DOM2級(jí)CSS能力
     alert('DOM1級(jí)CSS能力:'+document.implementation.hasFeature('CSS','2.0'));
     alert('DOM2級(jí)CSS能力:'+document.implementation.hasFeature('CSS2','2.0'));

1.訪問(wèn)元素的樣式

(1).style特性/對(duì)象
// 任何HTML元素標(biāo)簽都會(huì)有一個(gè)通用的屬性:style,它會(huì)返回CSSStyleDeclaration對(duì)象;
    CSS屬性及JavaScript調(diào)用
CSS屬性                 JavaScript調(diào)用
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級(jí)樣式規(guī)范為style對(duì)象定義屬性和方法
屬性或方法                       說(shuō)明
cssText                 訪問(wèn)或設(shè)置style中的CSS代碼;
    box.style.cssText;                      // 獲取CSS代碼;
    // PS:style屬性?xún)H僅只能獲取行內(nèi)的CSS樣式,對(duì)于另外兩種形式內(nèi)聯(lián)<style>和鏈接<link>方法則無(wú)法獲取到;

(2).計(jì)算后的樣式:getComputedStyle/currentStyle
// 雖然可以通過(guò)style來(lái)獲取單一值的CSS樣式,但對(duì)于復(fù)合值的樣式信息,就需要通過(guò)計(jì)算樣式來(lái)獲取;
// DOM2級(jí)樣式,window對(duì)象下提供了getComputedStyle()方法:接收兩個(gè)參數(shù),需要計(jì)算的樣式元素,和偽類(lèi)(:hover);如果沒(méi)有偽類(lèi),則null;
// getComputedStyle()方法返回一個(gè)CSSStyleDeclaration對(duì)象;(與style屬性的類(lèi)型相同);其中包含當(dāng)前元素的所有計(jì)算的樣式;
// PS:IE不支持這個(gè)DOM2級(jí)的方法,但有個(gè)類(lèi)似的屬性可以使用currentStyle屬性;
var box = document.getElementById('box');
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null ||box.currentStyle;
alert(style.color); // 顏色在不同的瀏覽器會(huì)有不同rgb()格式;
alert(style.border); // 不同瀏覽器不同的結(jié)果;
alert(sytle.fontFamily); // 計(jì)算顯示復(fù)合的樣式值;
// PS:border屬性是一個(gè)綜合屬性,所以它在Chrome顯示了,Firefox為空,IE為undefined;
// 所以,DOM在獲取CSS的時(shí)候,最好采用完整寫(xiě)法兼容性最好;比如:border-top-color;

2.操作樣式表

// 使用style屬性可以設(shè)置行內(nèi)的CSS樣式,而通過(guò)id和class調(diào)用是最常用的方法;  box.className = 'red';         // 通過(guò)className關(guān)鍵字來(lái)設(shè)置樣式;// 添加多個(gè)className函數(shù):  // 判斷是否存在這個(gè)class;  function hasClass(element,className){    return element.className.match(new RegExp('(//s|^)'+className+'(//s|$)'));  }  // 添加一個(gè)class,如果不存在的話;  function addClass(element,className){    if(!hasClass(element,className)){      element.className += " "+className;    }  }  // 刪除一個(gè)class,如果存在的話;  function removeClass(element,className){    if(hasClass(element,className)){      element.className = element.className.replace(new RegExp('(//s|^)'+className+'(//s|$)'),'');    }  }// 之前使用style屬性,僅僅只能獲取和設(shè)置行內(nèi)的樣式;// 然后學(xué)習(xí)的getComputedStyle和currentStyle,只能獲取卻不能設(shè)置;

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

(2).CSSStyleSheet對(duì)象的屬性和方法
CSSStyleSheet屬性或方法
屬性或方法 說(shuō)明
disabled 獲取和設(shè)置樣式表是否被禁用;
href 如果是通過(guò)<link>包含的,則樣式表為URL,否則為null;
media 樣式表支持的所有媒體類(lèi)型的集合;
ownerNode 指向擁有當(dāng)前樣式表的指針;
parentStyleSheet @import導(dǎo)入的情況下,得到父CSS對(duì)象;
title ownerNode中title屬性的值;
type 樣式表類(lèi)型字符串;
cssRules 樣式表包含樣式規(guī)則的集合,IE不支持; IE為rules;12 ownerRule @import導(dǎo)入的情況下,指向表示導(dǎo)入的規(guī)則,IE不支持;
deleteRule(index) 刪除cssRules集合中指定位置的規(guī)則,IE不支持;
insertRule(rule,index) 向cssRules集合中指定位置插入rule字符串,IE不支持;

sheet.disabled; // false; 可設(shè)置為true;
sheet.href; // css的URL;
sheet.media; // MediaList,集合;
sheet.title; // 得到title屬性的值;
sheet.cssRules; // CSSRuleList,樣式表規(guī)則集合;
sheet.deleteRule(0); // 刪除第一個(gè)樣式規(guī)則;
sheet.insertRule("body {background-color:red}",0); // 在第一個(gè)位置添加一個(gè)樣式規(guī)則;

// PS:IE中不支持的屬性和方法,IE有替代版本;
sheet.rules; // 代替cssRules的IE版本;
sheet.removeRule(0); // 代替deleteRule的IE版本;
sheet.addRule("body","{background-color:red",0); // 代替insertRule的IE版本;

// 除了剛才的方法可以得到CSSStyleSheet類(lèi)型,還有一種方法是通過(guò)document的styleSheets屬性來(lái)獲取;
document.styleSheets; // StyleSheetList,集合;
var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet,第一個(gè)樣式表對(duì)象;

// 添加CSS規(guī)則,并兼容所有瀏覽器函數(shù);  var sheet = docuemnt.styleSheets[0];  insertRule(sheet,"body","background-color:red;",0);  function insertRule(sheet,selectorText,cssText,postion){    // 如果是非IE;    if(sheet.insertRule){      sheet.insertRule(selectorText+"{"+cssText+"}",postion);    // 如果是IE    }else if(sheet.addRule){      sheet.addRule(selectorText,cssText,postion);    }  }

(3).CSSRules樣式表規(guī)則集合列表;
// 通過(guò)CSSRules屬性(非IE)和rules屬性(IE),我們可以獲得樣式表的規(guī)則集合列表;
// 這樣我們就可以對(duì)每個(gè)樣式進(jìn)行具體的操作了;
var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet;
var rules = sheet.cssRules || sheet.rules; // CSSRuleList,樣式表的規(guī)則集合列表;
var rule = rules[0]; // CSSStyleRule,樣式表的第一個(gè)規(guī)則;
CSSRules的屬性
屬性 說(shuō)明
cssText 獲取當(dāng)前整體規(guī)則對(duì)應(yīng)的文本,IE不支持;
parentRule @import導(dǎo)入的,返回規(guī)則或null,IE不支持;
parentStyleSheet 當(dāng)前規(guī)則的樣式表,IE不支持;
selectorText 獲取當(dāng)前規(guī)則的選擇符文本;
style 返回CSSStyleDeclaration對(duì)象,可以獲取和設(shè)置樣式;
type 表示規(guī)則的常量值,對(duì)于樣式規(guī)則,值為1,IE不支持;

rule.cssText; // 當(dāng)前規(guī)則的樣式文本;
rule.selectorText; // #box;樣式的選擇符;
rule.style.color; // red;得到具體樣式值;
rule.style.backgroundColor = "green"; // 修改某一條規(guī)則的樣式信息;

三 總結(jié)

DOM2級(jí)樣式模塊主要針對(duì)操作元素的樣式信息而開(kāi)發(fā)的,其特性如下:
(1).每個(gè)元素都有一個(gè)關(guān)聯(lián)的style對(duì)象,可以用來(lái)確定和修改行內(nèi)的樣式;
(2).要確定某個(gè)元素的計(jì)算樣式(包括應(yīng)用給它的所有CSS規(guī)則),可以使用getComputedStyle()方法;
(3).IE支持類(lèi)似的方法currentStyle();
(4).可以通過(guò)document.styleSheets集合訪問(wèn)樣式表;6 // (5).樣式表規(guī)則集合列表CSSRules;1 // 三種操作CSS的方法:

第一種style行內(nèi),可讀可寫(xiě);
第二種行內(nèi)/內(nèi)聯(lián)和鏈接,使用getComputedStyle或currentStyle,可讀不可寫(xiě);
第三種內(nèi)聯(lián)和連接,使用cssRules或rules,可讀可寫(xiě);