DOM 操作技术

主要包括以下四种：

动态脚本

动态加载脚本的方式：

//动态加载的外部 JavaScript 文件能够立即运行，比如下面的<script>元素
<script type="text/javascript" src="client.js"></script>
//或者 创建这个节点的 DOM：
var script = document.createElement("script"); 
script.type = "text/javascript";
script.src = "client.js"; 
document.body.appendChild(script);
//或者写个函数去封装一下：
function loadScript(url){ 
  var script = document.createElement("script"); 
  script.type = "text/javascript"; 
  script.src = url; 
  document.body.appendChild(script); 
}
然后，就可以通过调用这个函数来加载外部的 JavaScript 文件了：
loadScript("client.js");

动态样式

与动态脚本方式无多异：

//典型的<link>元素为例：
<link rel="stylesheet" type="text/css" href="styles.css">
//使用 DOM 代码可以很容易地动态创建出这个元素：
var link = document.createElement("link"); 
link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = "style.css"; 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(link);
//也可以这样去封装
function loadStyles(url){ 
    var link = document.createElement("link");
  link.rel = "stylesheet"; 
  link.type = "text/css"; 
  link.href = url; 
  var head = document.getElementsByTagName("head")[0]; 
  head.appendChild(link); 
}
然后去调用：
loadStyles("styles.css");
//另一种定义样式的方式是使用<style>元素来包含嵌入式 CSS，如下所示：
<style type="text/css"> 
  body { 
    background-color: red; 
  } 
</style>

操作表格

也就是创建表格：

<table border="1" width="100%"> 
  <tbody> 
    <tr> 
      <td>Cell 1,1</td> 
      <td>Cell 2,1</td> 
    </tr> 
    <tr> 
      <td>Cell 1,2</td> 
      <td>Cell 2,2</td> 
    </tr> 
  </tbody> 
</table>

要使用核心 DOM 方法创建这些元素，得需要像下面这么多的代码：

//创建 table 
var table = document.createElement("table"); 
table.border = 1; 
table.width = "100%"; 
//创建 tbody 
var tbody = document.createElement("tbody");
table.appendChild(tbody); 
//创建第一行
var row1 = document.createElement("tr"); 
tbody.appendChild(row1); 
var cell1_1 = document.createElement("td"); 
cell1_1.appendChild(document.createTextNode("Cell 1,1")); 
row1.appendChild(cell1_1); 
var cell2_1 = document.createElement("td"); 
cell2_1.appendChild(document.createTextNode("Cell 2,1")); 
row1.appendChild(cell2_1); 
//创建第二行
var row2 = document.createElement("tr"); 
tbody.appendChild(row2); 
var cell1_2 = document.createElement("td"); 
cell1_2.appendChild(document.createTextNode("Cell 1,2")); 
row2.appendChild(cell1_2); 
var cell2_2= document.createElement("td"); 
cell2_2.appendChild(document.createTextNode("Cell 2,2")); 
row2.appendChild(cell2_2); 
//将表格添加到文档主体中
document.body.appendChild(table);

使用NodeList

省略先（好像还没遇到过，自己理解太肤浅）