动态脚本
定义：页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。
创建动态脚本有两种方法：
- 插入外部文件
- 直接插入JavaScript代码
插入外部文件
var script = document.createElement("script");
script.type = "text/javascipt";
script.src = "client.js";
document.body.appendChild(script);
可以将整个过程用函数封装：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascipt";
script.src = url;
document.body.appendChild(script);
}
//然后就可以通过调用这个函数来夹在外部的JavaScript文件了
loadScript("client.js");
直接插入JavaScript代码
用行内方式指定JavaScript代码。
script type="application/javascript">
function sayHi() {
alert("hi");
}
</script>
用下面的方式创建JavaScript代码从逻辑上来讲是有效的，但是在IE中会导致错误（Firefox、Safari、chrome和Opera会正常运行）。IE将<script>视为一个特殊的元素，不允许DOM访问其子节点。
var script = document.createElement("script");
script.type = "text/javascipt";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);
解决在IE上的错误的办法：
使用<script>元素的text属性来指定JavaScript代码。
var script = document.createElement("script");
script.type = "text/javascipt";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);
以这种方式夹在的代码会在全局作用域中执行，而且当脚本执行后立即可用。
封装后：
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascipt";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = "function sayHi(){alert('hi');}";
}
document.body.appendChild(script);
}
动态样式
定义：指在页面刚加载时不存在的样式。
动态样式是在页面加载完成后动态添加到页面中的。
插入外部样式
必须将<link>元素添加到<head>而不是<body>元素，才能保证在所有浏览器中的行为一直。
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "styles.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
封装函数：
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
加载外部样式文件的过程是异步的，也就是加载样式与执行JavaScript代码的过程没有固定的次序。
直接插入JavaScript代码
var style = document.createElement("link");
style.rel = "stylesheet";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
上面的代码与<script>的错误类似，也是在IE中会报错。
解决IE中这个问题的办法，就是访问元素的stylesheet属性，该属性又有一个cssText属性，可以接受CSS代码。
var style = document.createElement("link");
style.rel = "stylesheet";
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);
封装后：
function loadStyleString(css){
var style = document.createElement("link");
style.rel = "stylesheet";
try{
style.appendChild(document.createTextNode(css));
}catch (ex){
style.stylesheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
操作表格
| 属性 | 描述 |
|---|---|
| caption | 保存着对<caption>（如果有）的指针。 |
| tBodies | 是一个<tbody>元素的HTMLCollection |
| tHead | 保存着对<thead>（如果有）的指针。 |
| tFoot | 保存着对<tfoot>（如果有）的指针。 |
| rows | 是一个表格中所有行的HTMLCollection。 |
为了方便构建表格，HTML DOM为<table>、<tbodt>和<tr>元素添加了一些属性和方法。
为<table>添加的属性如下：
| 属性 | 描述 |
|---|---|
| caption | 保存着对<caption>（如果有）的指针。 |
| tBodies | 是一个<tbody>元素的HTMLCollection |
| tHead | 保存着对<thead>（如果有）的指针。 |
| tFoot | 保存着对<tfoot>（如果有）的指针。 |
| rows | 是一个表格中所有行的HTMLCollection。 |
| 方法 | 描述 |
|---|---|
| createCaption() | 创建<caption>元素，将其放到表格中，返回引用。 |
| createTHead() | 创建<tHead>元素，将其放到表格中，返回引用。 |
| createTFoot() | 创建<tFootd>元素，将其放到表格中，返回引用。 |
| inserstRow(pos) | 向rows集合中的指定位置插入一行。 |
| deleteCaption() | 删除<caption>元素。 |
| deleteTHead() | 删除<tHead>元素。 |
| deleteTFoot() | 删除<tFootd>元素。 |
| deleteRow(pos) | 删除指定位置的行。 |
为<table>添加的方法如下：
| 方法 | 描述 |
|---|---|
| createCaption() | 创建<caption>元素，将其放到表格中，返回引用。 |
| createTHead() | 创建<tHead>元素，将其放到表格中，返回引用。 |
| createTFoot() | 创建<tFootd>元素，将其放到表格中，返回引用。 |
| inserstRow(pos) | 向rows集合中的指定位置插入一行。 |
| deleteCaption() | 删除<caption>元素。 |
| deleteTHead() | 删除<tHead>元素。 |
| deleteTFoot() | 删除<tFootd>元素。 |
| deleteRow(pos) | 删除指定位置的行。 |
| 属性/方法 | 描述 |
|---|---|
| rows | 保存着<tbody>元素中行的HTMLCollection。 |
| inserstRow(pos) | 向rows集合中的指定位置插入一行，返回对新插入行的引用。 |
| deleteRow(pos) | 删除指定位置的行。 |
为<tbody>添加的属性和方法如下：
| 属性/方法 | 描述 |
|---|---|
| rows | 保存着<tbody>元素中行的HTMLCollection。 |
| inserstRow(pos) | 向rows集合中的指定位置插入一行，返回对新插入行的引用。 |
| deleteRow(pos) | 删除指定位置的行。 |
| 属性/方法 | 描述 |
|---|---|
| cells | 保存着<tr>元素中单元格的HTMLCollection。 |
| inserstCell(pos) | 向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用。 |
| deleteCell(pos) | 删除指定位置的单元格。 |
为<tr>添加的属性和方法如下：
| 属性/方法 | 描述 |
|---|---|
| cells | 保存着<tr>元素中单元格的HTMLCollection。 |
| inserstCell(pos) | 向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用。 |
| deleteCell(pos) | 删除指定位置的单元格。 |
<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);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//将表格添加到文档主题中
document.body.appendChild(table);
使用NodeList
三个“动态的”集合：NodeList、NamedNodeMap、HTMLCollection。
每当文档结构发生变化时，它们都会得到更新。因此，它们始终保持着最新、最准确的信息。
本质上说，所有NodeList对象都是在访问DOM文档时实时运行的查询。
下面代码会导致无限循环：
var divs = document.getElementsByTagName("div"),
i,
div;
for(i=0;i<divs.length;i++){
div = document.createElement("div");
document.body.appendChild(div);
}
因此，如果想要迭代一个NodeList，最好使用length属性初始化第二个变量，然后将迭代器与该变量进行比较：
var divs = document.getElementsByTagName("div"),
i,
len,
div;
for(i=0,len=divs.length;i<len;i++){
div = document.createElement("div");
document.body.appendChild(div);
}
应尽量减少访问NodeList的次数。因为每次访问NodeList，都会运行一次基于文档的查询。所以可以考虑将从NodeList中取得的值缓存起来。
