Javascript之DOM操作技术

来源：互联网发布：java 获取cst时间编辑：程序博客网时间：2024/05/16 19:22

转自：http://www.cnblogs.com/zxj159/archive/2013/06/07/3123633.html

1.动态脚本

当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。

比如：我们想在需要检测浏览器的时候，再引入检测文件。

1
2
3
4
5
6
7
8
9
10
11
varflag = true;//设置true 再加载 
if(flag) { 
    loadScript('browserdetect.js');//设置加载的js 
}
functionloadScript(url) { 
    varscript = document.createElement('script');
    script.type ='text/javascript'; 
    script.src = url;
    //document.head.appendChild(script); //document.head 表示<head>
    document.getElementsByTagName('head')[0].appendChild(script);
}

PS：document.head 调用，IE 不支持，会报错！

1
2
3
4
5
6
//动态执行js
varscript = document.createElement('script');
script.type ='text/javascript'; 
vartext = document.createTextNode("alert('Lee')");//IE 浏览器报错 
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);

PS：IE 浏览器认为script 是特殊元素，不能在访问子节点。为了兼容，可以使用text属性来代替。

script.text = "alert('')"; //IE 可以支持了。

PS：当然，如果不支持text，那么就可以针对不同的浏览器特性来使用不同的方法。这里就忽略写法了。

2.动态样式

为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//动态执行link
varflag = true;
if(flag) { 
    loadStyles('basic.css');
}
functionloadStyles(url) { 
    varlink = document.createElement('link');
    link.rel ='stylesheet'; 
    link.type ='text/css'; 
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
}
//动态执行style
varflag = true;
if(flag) { 
    varstyle = document.createElement('style');
    style.type ='text/css'; 
    //var box= document.createTextNode('#box{background:red}'); IE 不支持
    //style.appendChild(box);
    document.getElementsByTagName('head')[0].appendChild(style);
    insertRule(document.styleSheets[0],'#box', 'background:red', 0);
}
functioninsertRule(sheet, selectorText, cssText, position) { 
    //如果是非IE
    if(sheet.insertRule) { 
        sheet.insertRule(selectorText +"{" + cssText + "}", position); 
    //如果是IE
    }else if (sheet.addRule) { 
        sheet.addRule(selectorText, cssText, position);
    }
}

3.操作表格

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//需要操作的table,ps:一个表格里只能有一个caption、thead、tfoot，而tbody可以有多个
<tableborder="1"width="300">
  <caption>人员表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <tdcolspan="3">合计：N</td>
    </tr>
  </tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//使用DOM 来创建这个表格
vartable = document.createElement('table');
table.border = 1;
table.width = 300;
document.body.appendChild(table);
  
varcaption = document.createElement('caption');
table.appendChild(caption);
caption.appendChild(document.createTextNode('人员表'));
  
varthead = document.createElement('thead');
table.appendChild(thead);
  
vartr = document.createElement('tr');
thead.appendChild(tr);
  
varth1 = document.createElement('th');
tr.appendChild(th1);
th1.appendChild(document.createTextNode('姓名'));
  
varth2 = document.createElement('th');
tr.appendChild(th2);
th2.appendChild(document.createTextNode('年龄'));
  
varth3 = document.createElement('th');
...

PS：使用DOM 来创建表格其实已经没有什么难度，就是有点儿小烦而已。下面我们再使用HTML DOM 来获取和创建这个相同的表格。

HTML DOM 中，给这些元素标签提供了一些属性和方法
属性或方法        说明
caption             保存着<caption>元素的引用
tBodies            保存着<tbody>元素的HTMLCollection 集合
tFoot                保存着对<tfoot>元素的引用
tHead              保存着对<thead>元素的引用
rows                 保存着对<tr> 元素的HTMLCollection 集合
createTHead()     创建<thead>元素，并返回引用
createTFoot()     创建<tfoot>元素，并返回引用
createCaption()   创建<caption>元素，并返回引用
deleteTHead()     删除<thead>元素
deleteTFoot()     删除<tfoot>元素
deleteCaption()   删除<caption>元素
deleteRow(pos)    删除指定的行
insertRow(pos)    向rows 集合中的指定位置插入一行

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

<tr>元素添加的属性和方法
属性或方法        说明
cells             保存着<tr>元素中单元格的HTMLCollection
deleteCell(pos)   删除指定位置的单元格

insertCell(pos)   向cells 集合的指定位置插入一个单元格，并返回引用
PS：因为表格较为繁杂，层次也多，在使用之前所学习的DOM 只是来获取某个元素会非常难受，所以使用HTML DOM 会清晰很多。

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

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

1
2
3
4
5
6
7
8
9
//按HTML DOM 来获取表格的<caption>
alert(table.caption.innerHTML);//获取caption 的内容 
  
//按HTML DOM 来获取表头表尾<thead>、<tfoot>
alert(table.tHead);//获取表头 
alert(table.tFoot);//获取表尾 
  
//按HTML DOM 来获取表体<tbody>
alert(table.tBodies);//获取表体的集合

PS：在一个表格中<thead>和<tfoot>是唯一的，只能有一个。而<tbody>不是唯一的可以有多个，这样导致最后返回的<thead>和<tfoot>是元素引用，而<tbody>返回的是元素集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//按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();//删除<thead> 
table.tBodies[0].deleteRow(0);//删除<tr>一行 
table.tBodies[0].rows[0].deleteCell(0);//删除<td>一个单元格 
  
//按HTML DOM 创建一个表格
vartable = document.createElement('table');
table.border = 1;
table.width = 300;
  
table.createCaption().innerHTML ='人员表'; 
  
varthead = table.createTHead(); 
vartr = thead.insertRow(0); 
  
vartd = tr.insertCell(0); 
td.appendChild(document.createTextNode('数据'));
  
vartd2 = tr.insertCell(1); 
td2.appendChild(document.createTextNode('数据2'));
  
document.body.appendChild(table);

PS：在创建表格的时候<table>、<tbody>、<th>没有特定的方法，需要使用document来创建。也可以模拟已有的方法编写特定的函数即可，例如：insertTH()之类的。

0 0