[JavaScript]DOM操作技术

1. 动态脚本

使用<script>元素可以向页面中插入JavaScript代码，一种方式是通过src属性包含外部文件，另一种方式是用这个元素本身来包含代码。动态脚本指在页面加载时不存在，但将来某时通过修改DOM动态添加的脚本。

动态加载的外部JavaScript文本能够立即执行，例如：

<script type="text/javascript" src="test.js"></script>

创建这个节点的DOM代码如下：

var script = document.createElement("Script");
script.type = "text/javascript";
script.src = "test.js";
document.body.appendChild(script);

另一种指定JavaScript代码的方式是行内方式，例如：

<script type="text/javascript">
  function myfunc() {
    alert("Hello World!");
  }
</script>

创建的DOM代码如下：

var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function myfunc(){alert('Hello World!');}";
document.body.appendChild(script);

2. 动态样式

把CSS样式包含到HTML页面中的元素有两个。其中<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。与动态脚本类似，动态样式指在页面刚加载时不存在的样式，是在页面加载完成后动态添加到页面中的。

例如：

<link rel="stylesheet" type="text/css" href="test.css">

使用DOM代码可以动态创建出这个元素，如下所示：

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "test.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

另一种定义样式的方式是使用<style>元素来包含CSS，例如：

<style type="text/css">
  body {
    background-color: red;
  }
</style>

对应的创建的DOM代码如下：

var style = document.createElement("style");
style.type = "text/css";
try {
  style.appendChild(document.createTextNode("body{background-color: red}"));
}
catch (ex) {
  style.styleSheet.cssText = "body{background-color: red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

3. 操作表格

为了方便构建表格，HTML DOM还为<table>、<tbody>和<tr>元素添加了一些属性和方法。

为<table>元素添加的属性和方法如下：

1) caption: 保存对<caption>元素的指针。

2) tBodies: 是一个<tbody>元素的HTMLCollection。

3) tFoot: 保存对<tfoot>元素的指针。

4) tHead: 保存对<thead>元素的指针。

5) rows: 表格中所有行的HTMLCollection。

6) createTHead(): 创建<thead>元素，返回引用。

7) createTFoot(): 创建<tfoot>元素，返回引用。

8) createCaption(): 创建<caption>元素，返回引用。

9) deleteTHead(): 删除<thead>元素。

10) deleteTFoot(): 删除<tfoot>元素。

11) deleteCaption(): 删除<caption>元素。

12) deleteRow(pos): 删除指定位置的行。

13) insertRow(pos): 向rows集合中的指定位置插入一行。

为<tbody>添加的属性和方法如下：

1) rows: 保存<tbody>元素中行的HTMLCollection。

2) deleteRow(pos): 删除指定位置的行。

3) insertRow(pos): 向rows集合中的指定位置插入一行。

为<tr>元素添加的属性和方法如下：

1) cells: 保存<tr>元素中单元格的HTMLCollection。

2) deleteCell(pos): 删除指定位置的单元格。

3) insertCell(pos): 向cells集合中的指定位置插入一个单元格。

本文出自 “青锋笔记” 博客，谢绝转载！