JavaScript DOM操作表格及样式


Posted in Javascript onApril 13, 2015

一 操作表格

<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它;

// 使用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.操作样式表

// 使用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属性,IE使用styleSheet;
var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet || link.styleSheet; // 得到CSSStyleSheet;

(2).CSSStyleSheet对象的属性和方法
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,第一个样式表对象;

// 添加CSS规则,并兼容所有浏览器函数;
  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样式表规则集合列表;
// 通过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"; // 修改某一条规则的样式信息;

三 总结

DOM2级样式模块主要针对操作元素的样式信息而开发的,其特性如下:
(1).每个元素都有一个关联的style对象,可以用来确定和修改行内的样式;
(2).要确定某个元素的计算样式(包括应用给它的所有CSS规则),可以使用getComputedStyle()方法;
(3).IE支持类似的方法currentStyle();
(4).可以通过document.styleSheets集合访问样式表;6 // (5).样式表规则集合列表CSSRules;1 // 三种操作CSS的方法:

第一种style行内,可读可写;
第二种行内/内联和链接,使用getComputedStyle或currentStyle,可读不可写;
第三种内联和连接,使用cssRules或rules,可读可写;

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
Jquery ajax基础教程
Nov 20 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
vue中使用props传值的方法
May 08 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
JavaScript DOM进阶方法
Apr 13 #Javascript
JavaScript DOM基础
Apr 13 #Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 #Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 #Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 #Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 #Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
jquery为页面增加快捷键示例
2014/01/31 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python高效编程技巧
2013/01/07 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
经典的班主任推荐信
2013/10/28 职场文书
超市国庆节促销方案
2014/02/20 职场文书
学术会议主持词
2014/03/17 职场文书
教师对学生的寄语
2014/04/03 职场文书
银行求职信
2014/05/31 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
Nebula Graph解决风控业务实践
2022/03/31 MySQL