動(dòng)態(tài)腳本
定義：頁面加載時(shí)不存在攒菠，但將來的某一時(shí)刻通過修改DOM動(dòng)態(tài)添加的腳本。
創(chuàng)建動(dòng)態(tài)腳本有兩種方法：
- 插入外部文件
- 直接插入JavaScript代碼
插入外部文件
var script = document.createElement("script");
script.type = "text/javascipt";
script.src = "client.js";
document.body.appendChild(script);
可以將整個(gè)過程用函數(shù)封裝：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascipt";
script.src = url;
document.body.appendChild(script);
}
//然后就可以通過調(diào)用這個(gè)函數(shù)來夾在外部的JavaScript文件了
loadScript("client.js");
直接插入JavaScript代碼
用行內(nèi)方式指定JavaScript代碼。
script type="application/javascript">
function sayHi() {
alert("hi");
}
</script>
用下面的方式創(chuàng)建JavaScript代碼從邏輯上來講是有效的拭卿，但是在IE中會(huì)導(dǎo)致錯(cuò)誤（Firefox、Safari、chrome和Opera會(huì)正常運(yùn)行）猿挚。IE將<script>視為一個(gè)特殊的元素，不允許DOM訪問其子節(jié)點(diǎn)驶鹉。
var script = document.createElement("script");
script.type = "text/javascipt";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);
解決在IE上的錯(cuò)誤的辦法：
使用<script>元素的text屬性來指定JavaScript代碼绩蜻。
var script = document.createElement("script");
script.type = "text/javascipt";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);
以這種方式夾在的代碼會(huì)在全局作用域中執(zhí)行，而且當(dāng)腳本執(zhí)行后立即可用室埋。
封裝后：
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);
}
動(dòng)態(tài)樣式
定義：指在頁面剛加載時(shí)不存在的樣式辜羊。
動(dòng)態(tài)樣式是在頁面加載完成后動(dòng)態(tài)添加到頁面中的。
插入外部樣式
必須將<link>元素添加到<head>而不是<body>元素词顾，才能保證在所有瀏覽器中的行為一直八秃。
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "styles.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
封裝函數(shù)：
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
加載外部樣式文件的過程是異步的，也就是加載樣式與執(zhí)行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>的錯(cuò)誤類似昔驱，也是在IE中會(huì)報(bào)錯(cuò)。
解決IE中這個(gè)問題的辦法上忍，就是訪問元素的stylesheet屬性骤肛，該屬性又有一個(gè)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 | 是一個(gè)<tbody>元素的HTMLCollection |
| tHead | 保存著對<thead>（如果有）的指針繁成。 |
| tFoot | 保存著對<tfoot>（如果有）的指針。 |
| rows | 是一個(gè)表格中所有行的HTMLCollection淑玫。 |
為了方便構(gòu)建表格巾腕，HTML DOM為<table>、<tbodt>和<tr>元素添加了一些屬性和方法絮蒿。
為<table>添加的屬性如下：
| 屬性 | 描述 |
|---|---|
| caption | 保存著對<caption>（如果有）的指針尊搬。 |
| tBodies | 是一個(gè)<tbody>元素的HTMLCollection |
| tHead | 保存著對<thead>（如果有）的指針。 |
| tFoot | 保存著對<tfoot>（如果有）的指針土涝。 |
| rows | 是一個(gè)表格中所有行的HTMLCollection佛寿。 |
| 方法 | 描述 |
|---|---|
| createCaption() | 創(chuàng)建<caption>元素，將其放到表格中但壮，返回引用冀泻。 |
| createTHead() | 創(chuàng)建<tHead>元素，將其放到表格中蜡饵，返回引用腔长。 |
| createTFoot() | 創(chuàng)建<tFootd>元素，將其放到表格中验残，返回引用捞附。 |
| inserstRow(pos) | 向rows集合中的指定位置插入一行。 |
| deleteCaption() | 刪除<caption>元素您没。 |
| deleteTHead() | 刪除<tHead>元素鸟召。 |
| deleteTFoot() | 刪除<tFootd>元素。 |
| deleteRow(pos) | 刪除指定位置的行氨鹏。 |
為<table>添加的方法如下：
| 方法 | 描述 |
|---|---|
| createCaption() | 創(chuàng)建<caption>元素欧募，將其放到表格中，返回引用仆抵。 |
| createTHead() | 創(chuàng)建<tHead>元素跟继，將其放到表格中，返回引用镣丑。 |
| createTFoot() | 創(chuàng)建<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集合中的指定位置插入一個(gè)單元格虎忌，返回對新插入單元格的引用泡徙。 |
| deleteCell(pos) | 刪除指定位置的單元格。 |
為<tr>添加的屬性和方法如下：
| 屬性/方法 | 描述 |
|---|---|
| cells | 保存著<tr>元素中單元格的HTMLCollection膜蠢。 |
| inserstCell(pos) | 向cells集合中的指定位置插入一個(gè)單元格堪藐，返回對新插入單元格的引用。 |
| 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方法創(chuàng)建一個(gè)上面的表格：
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = '100%';
//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//創(chuàng)建第一行
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"));
//創(chuàng)建第二行
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
三個(gè)“動(dòng)態(tài)的”集合：NodeList礁竞、NamedNodeMap、HTMLCollection杉辙。
每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時(shí)模捂，它們都會(huì)得到更新。因此蜘矢，它們始終保持著最新狂男、最準(zhǔn)確的信息。
本質(zhì)上說品腹，所有NodeList對象都是在訪問DOM文檔時(shí)實(shí)時(shí)運(yùn)行的查詢岖食。
下面代碼會(huì)導(dǎo)致無限循環(huán)：
var divs = document.getElementsByTagName("div"),
i,
div;
for(i=0;i<divs.length;i++){
div = document.createElement("div");
document.body.appendChild(div);
}
因此，如果想要迭代一個(gè)NodeList舞吭，最好使用length屬性初始化第二個(gè)變量泡垃，然后將迭代器與該變量進(jìn)行比較：
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);
}
應(yīng)盡量減少訪問NodeList的次數(shù)。因?yàn)槊看卧L問NodeList羡鸥，都會(huì)運(yùn)行一次基于文檔的查詢蔑穴。所以可以考慮將從NodeList中取得的值緩存起來。
