DOM（三）——操作技术

二、DOM操作技术

1、动态脚本

在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。

创建方式：

• 插入外部JavaScript文件
• 直接插入JavaScript代码

2、动态样式

• 在页面刚加载时不存在的样式。
• 在页面加载完成后动态添加到页面中的。

定义样式的方式：

• 使用<link>元素加载外部样式文件，这个过程是异步的。
• 使用<style>元素来包含嵌入式CSS。

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

按照相同的逻辑，使用下列DOM代码实现：

var style = document.createElement("style");
style.type = "text/css";
//使用try-catch语句来捕获IE抛出的错误
try{
    style.appendChild(document.createTextNode(css));
} catch (ex){
    style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

3、操作表格

给出一个表格如下：

<table>
    <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创建上面这个表格：

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

使用属性和方法可以简化代码，如下所示。

//创建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);

4、使用NodeList

理解NodeList及namedNodeMap和HTMLCollection是从整体上透彻理解DOM的关键所在。
这三个集合都是“动态的”，换句话说，每当文档结构发生变化时，它们都会得到更新。
从本质上说，所有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);  
}