[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