JavaScript的DOM操作表格及样式
2013-01-29 16:45
405 查看
DOM 在操作生成HTML 上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱,
导致最终的操作就不是那么简单方便了。本章主要了解一下DOM 操作表格和样式的一些知
识。
一.操作表格
<table>标签是HTML 中结构最为复杂的一个,我们可以通过DOM 来创建生成它,或
者HTML DOM 来操作它。(PS:HTML DOM 提供了更加方便快捷的方式来操作HTML,有
手册)。
PS:使用DOM 来创建表格其实已经没有什么难度,就是有点儿小烦而已。下面我们再
使用HTML DOM 来获取和创建这个相同的表格。
PS:因为表格较为繁杂,层次也多,在使用之前所学习的DOM 只是来获取某个元素会
非常难受,所以使用HTML DOM 会清晰很多。
PS:这里使用了children[0]本身就忽略了空白,如果使用firstChild 或者childNodes[0]
需要更多的代码。
PS:在一个表格中<thead>和<tfoot>是唯一的,只能有一个。而<tbody>不是唯一的可以
有多个,这样导致最后返回的<thead>和<tfoot>是元素引用,而<tbody>返回的是元素集合。
PS:在创建表格的时候<table>、<tbody>、<th>没有特定的方法,需要使用document
来创建。也可以模拟已有的方法编写特定的函数即可,例如:insertTH()之类的。
二.操作样式
CSS 作为(X)HTML 的辅助,可以增强页面的显示效果。但不是每个浏览器都能支持最
新的CSS 能力。CSS 的能力和DOM 级别密切相关,所以我们有必要检测当前浏览器支持
CSS 能力的级别。
DOM1 级实现了最基本的文档处理,DOM2 和DOM3 在这个基础上增加了更多的交互
能力,这里我们主要探讨CSS,DOM2 增加了CSS 编程访问方式和改变CSS 样式信息。
PS:这种检测方案在IE 浏览器上不精确,IE6 中,hasFeature()方法只为HTML 和版本
1.0 返回true,其他所有功能均返回false。但IE 浏览器还是支持最常用的CSS2 模块。
1.访问元素的样式
任何HTML 元素标签都会有一个通用的属性:style。它会返回CSSStypeDeclaration 对
象。下面我们看几个最常见的行内style 样式的访问方式。
PS:以上取值方式也可以赋值,最后一种赋值可以如下:
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 属性。
PS:border 属性是一个综合属性,所以他在Chrome 显示了,Firefox 为空,IE 为undefined。
所谓综合性属性,就是XHTML 课程里所的简写形式,所以,DOM 在获取CSS 的时候,最
好采用完整写法兼容性最好,比如:border-top-color 之类的。
2.操作样式表
使用style 属性可以设置行内的CSS 样式,而通过id 和class 调用是最常用的方法。
在添加className 的时候,我们想给一个元素添加多个class 是没有办法的,后面一个
必将覆盖掉前面一个,所以必须来写个函数:
之前我们使用style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或
链接<link>提供的样式规则就无可奈何了,然后我们又学习了getComputedStyle 和
currentStyle,这只能获取却无法设置。
CSSStyleSheet 类型表示通过<link>元素和<style>元素包含的样式表。
这两个元素本身返回的是HTMLLinkElement 和HTMLStyleElement 类型,但
CSSStyleSheet 类型更加通用一些。得到这个类型非IE 使用sheet 属性,IE 使用styleSheet;
PS:除了几个不用和IE 不支持的我们忽略了,还有三个有IE 对应的另一种方式:
除了刚才的方法可以得到CSSStyleSheet 类型,还有一种方法是通过document 的
styleSheets 属性来获取。
为了添加CSS 规则,并且兼容所有浏览器,我们必须写一个函数:
为了删除CSS 规则,并且兼容所有浏览器,我们必须写一个函数:
通过CSSRules 属性(非IE)和rules 属性(IE),我们可以获得样式表的规则集合列表。这
样我们就可以对每个样式进行具体的操作了。
PS:Chrome 浏览器在本地运行时会出现问题,rules 会变成null,只要把它放到服务器
上允许即可正常。
总结:三种操作CSS 的方法,第一种style 行内,可读可写;第二种行内、内联和链接,
使用getComputedStyle 或currentStyle,可读不可写;第三种cssRules 或rules,内联和链接
可读可写。
导致最终的操作就不是那么简单方便了。本章主要了解一下DOM 操作表格和样式的一些知
识。
一.操作表格
<table>标签是HTML 中结构最为复杂的一个,我们可以通过DOM 来创建生成它,或
者HTML DOM 来操作它。(PS:HTML DOM 提供了更加方便快捷的方式来操作HTML,有
手册)。
//需要操作的table <table border="1" width="300"> <caption>人员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>女</td> <td>22</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">合计:N</td> </tr> </tfoot> </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 来获取和创建这个相同的表格。
PS:因为表格较为繁杂,层次也多,在使用之前所学习的DOM 只是来获取某个元素会
非常难受,所以使用HTML DOM 会清晰很多。
//使用HTML DOM 来获取表格元素 var table = document.getElementsByTagName('table')[0]; //获取table 引用 //按照之前的DOM 节点方法获取<caption> alert(table.children[0].innerHTML); //获取caption 的内容
PS:这里使用了children[0]本身就忽略了空白,如果使用firstChild 或者childNodes[0]
需要更多的代码。
//按HTML DOM 来获取表格的<caption> alert(table.caption.innerHTML); //获取caption 的内容 //按HTML DOM 来获取表头表尾<thead>、<tfoot> alert(table.tHead); //获取表头 alert(table.tFoot); //获取表尾 //按HTML DOM 来获取表体<tbody> alert(table.tBodies); //获取表体的集合
PS:在一个表格中<thead>和<tfoot>是唯一的,只能有一个。而<tbody>不是唯一的可以
有多个,这样导致最后返回的<thead>和<tfoot>是元素引用,而<tbody>返回的是元素集合。
//按HTML DOM 来获取表格的行数 alert(table.rows.length); //获取行数的集合,数量 //按HTML DOM 来获取表格主体里的行数 alert(table.tBodies[0].rows.length); //获取主体的行数的集合,数量 //按HTML DOM 来获取表格主体内第一行的单元格数量(tr) alert(table.tBodies[0].rows[0].cells.length); //获取第一行单元格的数量 //按HTML DOM 来获取表格主体内第一行第一个单元格的内容(td) alert(table.tBodies[0].rows[0].cells[0].innerHTML); //获取第一行第一个单元格的内容 //按HTML DOM 来删除标题、表头、表尾、行、单元格 table.deleteCaption(); //删除标题 table.deleteTHead(); //删除<thead> table.tBodies[0].deleteRow(0); //删除<tr>一行 table.tBodies[0].rows[0].deleteCell(0); //删除<td>一个单元格 //按HTML DOM 创建一个表格 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.insertRow(0); var td = tr.insertCell(0); td.appendChild(document.createTextNode('数据')); var td2 = tr.insertCell(1); td2.appendChild(document.createTextNode('数据2')); document.body.appendChild(table);
PS:在创建表格的时候<table>、<tbody>、<th>没有特定的方法,需要使用document
来创建。也可以模拟已有的方法编写特定的函数即可,例如:insertTH()之类的。
二.操作样式
CSS 作为(X)HTML 的辅助,可以增强页面的显示效果。但不是每个浏览器都能支持最
新的CSS 能力。CSS 的能力和DOM 级别密切相关,所以我们有必要检测当前浏览器支持
CSS 能力的级别。
DOM1 级实现了最基本的文档处理,DOM2 和DOM3 在这个基础上增加了更多的交互
能力,这里我们主要探讨CSS,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'));
PS:这种检测方案在IE 浏览器上不精确,IE6 中,hasFeature()方法只为HTML 和版本
1.0 返回true,其他所有功能均返回false。但IE 浏览器还是支持最常用的CSS2 模块。
1.访问元素的样式
任何HTML 元素标签都会有一个通用的属性:style。它会返回CSSStypeDeclaration 对
象。下面我们看几个最常见的行内style 样式的访问方式。
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';
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 属性。
var box = document.getElementById('box'); var style = window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle; alert(style .color); //颜色在不同的浏览器会有rgb()格式 alert(style .border); //不同浏览器不同的结果 alert(style .fontFamily); //计算显示复合的样式值 alert(box.style.fontFamily); //空
PS:border 属性是一个综合属性,所以他在Chrome 显示了,Firefox 为空,IE 为undefined。
所谓综合性属性,就是XHTML 课程里所的简写形式,所以,DOM 在获取CSS 的时候,最
好采用完整写法兼容性最好,比如:border-top-color 之类的。
2.操作样式表
使用style 属性可以设置行内的CSS 样式,而通过id 和class 调用是最常用的方法。
box.id = 'pox'; //把ID 改变会带来灾难性的问题 box.className = 'red'; //通过className 关键字来设置样式
在添加className 的时候,我们想给一个元素添加多个class 是没有办法的,后面一个
必将覆盖掉前面一个,所以必须来写个函数:
//判断是否存在这个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;
var link = document.getElementsByTagName('link')[0]; var sheet = link.sheet || link.styleSheet; //得到CSSStyleSheet
sheet.disabled; //false,可设置为true sheet.href; //css 的URL sheet.media; //MediaList,集合 sheet.media[0]; //第一个media 的值 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 = document.styleSheets[0]; //CSSStyleSheet,第一个样式表对象
为了添加CSS 规则,并且兼容所有浏览器,我们必须写一个函数:
var sheet = document.styleSheets[0]; insertRule(sheet, "body", "background-color:red;", 0); function insertRule(sheet, selectorText, cssText, position) { //如果是非IE if (sheet.insertRule) { sheet.insertRule(selectorText + "{" + cssText + "}", position); //如果是IE } else if (sheet.addRule) { sheet.addRule(selectorText, cssText, position); } }
为了删除CSS 规则,并且兼容所有浏览器,我们必须写一个函数:
var sheet = document.styleSheets[0]; deleteRule(sheet, 0); function deleteRule(sheet, index) { //如果是非IE if (sheet.deleteRule) { sheet.deleteRule(index); //如果是IE } else if (sheet.removeRule) { sheet.removeRule(index); } }
通过CSSRules 属性(非IE)和rules 属性(IE),我们可以获得样式表的规则集合列表。这
样我们就可以对每个样式进行具体的操作了。
var sheet = document.styleSheets[0]; //CSSStyleSheet var rules = sheet.cssRules || sheet.rules; //CSSRuleList,样式表的规则集合列表 var rule = rules[0]; //CSSStyleRule,样式表第一个规则
rule.cssText; //当前规则的样式文本 rule.selectorText; //#box,样式的选择符 rule.style.color; //red,得到具体样式值
PS:Chrome 浏览器在本地运行时会出现问题,rules 会变成null,只要把它放到服务器
上允许即可正常。
总结:三种操作CSS 的方法,第一种style 行内,可读可写;第二种行内、内联和链接,
使用getComputedStyle 或currentStyle,可读不可写;第三种cssRules 或rules,内联和链接
可读可写。
相关文章推荐
- JavaScript DOM操作表格及样式
- javascript基础:DOM4操作表格和样式
- javascript基础:DOM3操作表格和样式
- JavaScript学习9:DOM操作表格及样式
- JavaScript--DOM操作表格及样式(21)
- javaScript笔记(十七) DOM操作表格及样式
- JavaScript DOM操作表格及样式
- JavaScript DOM操作之表格操作(3)
- JavaScript DOM操作表格案例
- JavaScript DOM操作之表格操作(4)
- JavaScript高级程序设计之DOM之DOM 操作技术之动态样式第10.2.2讲
- 04——javascript Dom 动态创建元素 操作样式
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
- JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
- 第一百一十五节,JavaScript,DOM操作表格
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
- DOM 操作表格及样式
- 第一百一十六节,JavaScript,DOM操作样式
- Javascript之DOM(表格操作)
- JavaScript学习-操作样式的DOM API