菜单

JavaScript DOM操作表格及体制

2019年8月30日 - XML

JavaScript DOM操作表格及体制

 一 操作表格

<table>标签是HTML中布局最为复杂的一个,我们得以透过DOM来创设生成它,只怕HTMLDOM来操作它;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 使用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>富含的,则样式表为UPAJEROL,否则为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,第多个样式表对象;

1

2

3

4

5

6

7

8

9

10

11

12

// 添加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,可读可写;

http://www.bkjia.com/Javascript/983318.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/983318.htmlTechArticleJavaScript DOM操作表格及体制 一 操作表格
table标签是HTML中布局最为复杂的一个,大家得以经过DOM来创立生成它,可能HTMLDOM来操作它;
1 2 3 4 5 6…

相关文章

连带搜索:
JavaScript

今日看吗

探求技能库

再次来到首页

连锁频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

帮客户酌

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图