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浏览器滚动加载技术实现方案
Jun 03 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
js 概率计算(简单版)
Sep 12 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 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
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
asp 取文本框名称代码
2008/12/02 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
Python3.x中自定义比较函数
2015/04/24 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
机电专业体育教师求职信
2013/09/21 职场文书
公司面试感谢信
2014/02/01 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
环保公益策划方案
2014/08/15 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
详解nginx location指令
2022/01/18 Servers