[21]DOM操作表格及样式

2018-02-27 10:49:42来源:oschina作者:PengTdy人点击

分享

DOM 在操作生成 HTML 上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱 ,导致最终的操作就不是那么简单方便了。主要了解一下 DOM 操作表格和样式的一些知识。


一. 操作表格

标签是 HTML 中结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或者 HTML DOM 来操作它。(PS:HTML DOM 提供了更加方便快捷的方式来操作 HTML,有手册)。


//需要操作的 table


























人员表
姓名 性别 年龄
张三 20
李四 22
合计:N

//使用 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 来获取和创建这个相同的表格。


HTML DOM 中,给这些元素标签提供了一些属性和方法

属性或方法
说明
caption
保存着元素的引用 tBodies
保存着元素的 HTMLCollection 集合 tFoot
保存着对元素的引用 tHead
保存着对元素的引用 rows
保存着对 元素的 HTMLCollection 集合 createTHead()
创建元素,并返回引用 createTFoot()
创建元素,并返回引用 createCaption()
创建元素,并返回引用 deleteTHead()
删除元素 deleteTFoot()
删除元素 deleteCaption()
删除元素 deleteRow(pos)
删除指定的行 insertRow(pos)
向 rows 集合中的指定位置插入一行

元素添加的属性和方法

属性或方法
说明
rows
保存着元素中行的 HTMLCollection deleteRow(pos)
删除指定位置的行 insertRow(pos)
向 rows 集合中的指定位置插入一行,并返回引用

元素添加的属性和方法

属性或方法
说明
cells
保存着元素中单元格的 HTMLCollection deleteCell(pos)
删除指定位置的单元格 insertCell(pos)
向 cells 集合的指定位置插入一个单元格,并返回引用

PS:因为表格较为繁杂,层次也多,在使用之前所学习的 DOM 只是来获取某个元素会非常难受,所以使用 HTML DOM 会清晰很多。


//使用 HTML DOM 来获取表格元素
var table= document.getElementsByTagName('table')[0]; //获取 table 引用
//按照之前的 DOM 节点方法获取
alert(table.children[0].innerHTML); //获取 caption的内容

PS:这里使用了 children[0]本身就忽略了空白,如果使用 firstChild或者 childNodes[0]需要更多的代码。


//按 HTML DOM来获取表格的
alert(table.caption.innerHTML); //获取 caption的内容
//按 HTML DOM来获取表头表尾、
alert(table.tHead); //获取表头
alert(table.tFoot); //获取表尾
//按 HTML DOM来获取表体
alert(table.tBodies); //获取表体的集合

PS:在一个表格中和是唯一的,只能有一个。而不是唯一的可以有多个,这样导致最后返回的和是元素引用,而返回的是元素集合。


//按 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(); //删除
table.tBodies[0].deleteRow(0); //删除一行
table.tBodies[0].rows[0].deleteCell(0); //删除一个单元格
//按 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:在创建表格的时候

、、


Core
1.0、2.0、3.0
基本的 DOM,用于表现文档节点树 XML
1.0、2.0、3.0
Core 的 XML 扩展,添加了对 CDATA 等支持 HTML
1.0、2.0
XML 的 HTML 扩展,添加了对 HTML 特有元素支持 Views
2.0
基于某些样式完成文档的格式化 StyleSheets
2.0
将样式表关联到文档 CSS
2.0
对层叠样式表 1 级的支持 CSS2
2.0
对层叠样式表 2 级的支持 Events
2.0
常规的 DOM 事件 UIEvents
2.0
用户界面事件 MouseEvents
2.0
由鼠标引发的事件(如:click) MutationEvents
2.0
DOM 树变化时引发的事件 HTMLEvents
2.0
HTML4.01 事件 Range
2.0
用于操作 DOM 树中某个范围的对象和方法 Traversal
2.0
遍历 DOM 树的方法 LS
3.0
文件与 DOM 树之间的同步加载和保存 LS-Async
3.0
文件与 DOM 树之间的异步加载和保存 Valuidation
3.0
在确保有效的前提下修改DOM 树的方法

//检测浏览器是否支持 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 样式的访问方式。


CSS 属性及 JavaScript 调用



color
style.color font-size
style.fontSize float
非 IE:style.cssFloat float
IE:style.styleFloat 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';

DOM2 级样式规范为 style 定义了一些属性和方法



cssText
访问或设置 style 中的 CSS 代码 length
CSS 属性的数量 parentRule
CSS 信息的 CSSRule 对象 getPropertyCSSValue(name)
返回包含给定属性值的 CSSValue 对象 getPropertyPriority(name)
如果设置了!important,则返回,否则返回空字符串 item(index)
返回指定位置 CSS 属性名称 removeProperty(name)
从样式中删除指定属性 setProperty(name,v,p)
给属性设置为相应的值,并加上优先权 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 样式,对于另外两种形式内联

没有特定的方法,需要使用 document来创建。也可以模拟已有的方法编写特定的函数即可,例如:insertTH()之类的。


二. 操作样式

CSS 作为(X)HTML 的辅助,可以增强页面的显示效果。但不是每个浏览器都能支持最新的 CSS 能力。CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏览器支持CSS 能力的级别。


DOM1 级实现了最基本的文档处理,DOM2 和 DOM3 在这个基础上增加了更多的交互能力,这里我们主要探讨 CSS,DOM2 增加了 CSS 编程访问方式和改变 CSS 样式信息。


DOM一致性检测

功能 版本号 说明 CSS 属性 JavaScript 调用 属性或方法 说明