JavaScript DOM——“DOM操作技术”的注意要点

动态脚本

插入外部脚本文件

以script元素为例：

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

使用DOM动态的创建出这个元素：

function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}
loadScript("client.js")

行内方式插入脚本文件

以行内脚本代码为例：

<script type="text/javascript">
function sayHi () {
    alert("hi");
}
</script>

使用DOM动态的创建出这个元素：

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);

但在IE中会报错，解决办法是使用script元素的text属性：

var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);

最终通用的解决方案如下：

function loadScriptString(code) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex) {
        script.text = code;
    }
    document.body.appendChild(script);
}
loadScriptString("function sayHi(){alert('hi');}");

实际上在全局作用域中把相同的字符串传递给eval()是一样的。

动态样式

link元素包含来自外部的文件

以link元素为例：

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

使用DOM动态的创建出这个元素：

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("style.css");

style元素来指定嵌入的样式

以嵌入样式为例：

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

使用DOM动态的创建出这个元素：

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

但在IE中会报错，解决办法是访问元素的styleSheet属性的cssText属性：

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);

最终通用的解决方案如下：

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

操作表格

HTML表格为例：

<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);

为了方便构建表格，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. deleteRow(pos)：删除指定位置的行；

2. insertRow(pos)：插入一行到指定位置的rows集合中；

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

1. cells：tr元素中单元格的HTMLCollection；

2. deleteCell(pos)：删除指定位置的单元格；

3. insertCell(pos)：插入一个单元格到cells集合中；

使用这些方法和属性可以极大的减少创建表格所需的代码数量，返回对心插入单元格的引入；前面的代码重写如下：

//创建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的时候很容易犯这样的错误：

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("data"));
    document.body.appendChild(div);
}

这是一个无限循环，因为divs是动态的实时更新的。

应该把length属性初始化第二个变量：

var divs = document.getElementsByTagName("div");
for (var i = 0, len = divs.length; i < len; i++) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("data"));
    document.body.appendChild(div);
}

应该尽量减少访问NodeList的次数；因为每次访问NodeList都会运行依次基于文档的查询；所以应该考虑将从NodeList中提取出的值缓存起来。