[b]一 操作表格[/b] <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 表格较为复杂,层次也多,使用之前的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>是元素集合; [b]二 操作样式[/b]  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')); [b]1.访问元素的样式 [/b] (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; [b]2.操作样式表 [/b] [b](1).获得CSSStyleSheet [/b]// 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属性,IE使用styleSheet; var link = document.getElementsByTagName('link')[0]; var sheet = link.sheet || link.styleSheet; // 得到CSSStyleSheet; [b](2).CSSStyleSheet对象的属性和方法 [/b]CSSStyleSheet属性或方法 属性或方法 说明 disabled 获取和设置样式表是否被禁用; href 如果是通过<link>包含的,则样式表为URL,否则为null; media 样式表支持的所有媒体类型的集合; ownerNode 指向拥有当前样式表的指针; parentStyleSheet @import导入的情况下,得到父CSS对象; title ownerNode中title属性的值; type 样式表类型字符串; cssRules 样式表包含样式规则的集合,IE不支持; IE为rules;12 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.title; // 得到title属性的值; sheet.cssRules; // CSSRuleList,样式表规则集合; 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版本; // 除了刚才的方法可以得到CSSStyleSheet类型,还有一种方法是通过document的styleSheets属性来获取; document.styleSheets; // StyleSheetList,集合; var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet,第一个样式表对象; [b](3).CSSRules样式表规则集合列表; [/b]// 通过CSSRules属性(非IE)和rules属性(IE),我们可以获得样式表的规则集合列表; // 这样我们就可以对每个样式进行具体的操作了; var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet; var rules = sheet.cssRules || sheet.rules; // CSSRuleList,样式表的规则集合列表; var rule = rules[0]; // CSSStyleRule,样式表的第一个规则; CSSRules的属性 属性 说明 cssText 获取当前整体规则对应的文本,IE不支持; parentRule @import导入的,返回规则或null,IE不支持; parentStyleSheet 当前规则的样式表,IE不支持; selectorText 获取当前规则的选择符文本; style 返回CSSStyleDeclaration对象,可以获取和设置样式; type 表示规则的常量值,对于样式规则,值为1,IE不支持; rule.cssText; // 当前规则的样式文本; rule.selectorText; // #box;样式的选择符; rule.style.color; // red;得到具体样式值; rule.style.backgroundColor = "green"; // 修改某一条规则的样式信息; [b]三 总结[/b] DOM2级样式模块主要针对操作元素的样式信息而开发的,其特性如下: (1).每个元素都有一个关联的style对象,可以用来确定和修改行内的样式; (2).要确定某个元素的计算样式(包括应用给它的所有CSS规则),可以使用getComputedStyle()方法; (3).IE支持类似的方法currentStyle(); (4).可以通过document.styleSheets集合访问样式表;6 // (5).样式表规则集合列表CSSRules;1 // 三种操作CSS的方法: 第一种style行内,可读可写; 第二种行内/内联和链接,使用getComputedStyle或currentStyle,可读不可写; 第三种内联和连接,使用cssRules或rules,可读可写;