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 相关文章推荐
javascript引导程序
Oct 26 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
jquery text()要注意啦
Oct 30 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 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
用Flash图形化数据(一)
2006/10/09 PHP
php mysql数据库操作分页类
2008/06/04 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
js实现验证码功能
2020/07/24 Javascript
Python科学计算之NumPy入门教程
2017/01/15 Python
Python 多线程实例详解
2017/03/25 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python的launcher用法知识点总结
2020/08/07 Python
一文读懂Python 枚举
2020/08/25 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
英语分层教学实施方案
2014/06/15 职场文书
节电标语大全
2014/06/23 职场文书
教师师德师风整改措施
2014/10/24 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书