使用DOM技術操縱文檔
[2] 使用DOM技術操縱文檔
我們知道，如果使用DHTML對象模型對文檔的內容進行操縱，就必須了解相關文檔元素的特殊屬性和方法。因為文檔的元素有很多種，相應的屬性和方法也就非常多，為了實現一個功能，開發人員不得不查詢許多資料。但是有了DOM技術，一切變得簡單起來，那些操縱文檔內容的屬性和方法具備了元素無關性（element-independent）特點，這使得我們能夠按照相同的步驟操縱文檔內容。毋庸置疑，DOM技術為開發人員在對象層次上操縱文檔提供了最便捷的手段。
本文就為你全面介紹在JavaScript中如何使用DOM屬性和方法操縱文檔內容。
使用data、nodeValue和src屬性
DOM提供了2個屬性用于修改文本節點的內容，它們是data和nodeVaule。2個屬性實現的功能相同，語法是：object.data="new value"或者object.nodeVaule="new value"，其中object代表頁面中的文本項節點。如果修改圖形文件的內容，語法是：object.src="new value"，其中object表示頁面中的img標記節點。來看看下面的例子：
<head>
<title>DOM Demo </title>
</head>
<body id="bodyNode">
This is the document body
<p id="p1Node">
This is paragraph 1.</p>
<p id="p2Node">
This is paragraph 2.</p>
<p id="p3Node">
This is paragraph 3.
<img id="imgNode" src="myexam.gif">This text follows the image
<table id="tableNode">
<tr>
<td bgcolor="yellow">
This is row 1, cell 1
</td>
<td bgcolor="orange">
This is row 1, cell 2
</td>
</tr>
<tr>
<td bgcolor="red">
This is row 2, cell 1
</td>
<td bgcolor="magenta">
This is row 2, cell 2
</td>
</tr>
<tr>
<td bgcolor="lightgreen">
This is row 3, cell 1
</td>
<td bgcolor="beige">
This is row 3, cell 2
</td>
</tr>
</table>
</p>
<p id="p4Node">This is paragraph 4.</p>
<script language="JavaScript">
<!--
alert("頁面初始狀態" + "\n\n" + "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" + "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n");
bodyNode.firstChild.nodeValue = "This is the new document body, set by the nodeValue property";
p3Node.childNodes[1].src = "myexam2.gif";
alert("對頁面內容進行修改后" + "\n\n" + "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" + "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" + "p3Node.childNodes[1].src = " + p3Node.childNodes[1].src);
// -->
</script>
</body>
</html>
上述代碼首先顯示頁面的初始內容以及節點p1Node的相關屬性值，然后對節點bodyNode的第1個孩子節點的nodeValue屬性進行賦值修改其文本內容，對節點p3Node的第2個孩子節點（也就是了img標記）的src屬性進行賦值修改圖形的內容。
使用createElement方法
createElement方法的功能是在文檔中創建一個孤立HTML標記節點。孤立節點既沒有孩子節點也沒有雙親節點，而且與文檔中的現存節點也互不關聯。被創建的孤立HTML標記節點的唯一信息就是它代表的HTML標記，比如< P>、< FONT>和< TABLE>。CreateElement的語法為document.createElement(HTMLTag)，HTMLTag表示要創建的HTML標記，返回值是創建的孤立HTML標記節點。來看看下面的例子：
<head>
<title>DOM Demo </title>
</head>
<body id="bodyNode">
<script language="JavaScript">
<!--
alert("頁面初始狀態");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
trObj = document.createElement("TR");
tdObj = document.createElement("TD");
alert(" 對頁面內容進行修改后" + "\n" + "bodyNode.firstChild = " + bodyNode.firstChild + "\n" + "tableObj.nodeName = " + tableObj.nodeName + "\n" + "tbodyObj.nodeName = " + tbodyObj.nodeName + "\n" + "trObj.nodeName = " + trObj.nodeName + "\n" + "tdObj.nodeName = " + tdObj.nodeName + "\n" + "tableObj = " + tableObj + "\n");
// -->
</script>
</body>
</html>
上述代碼在文檔中創建了4個孤立HTML標記節點tableObj、tbodyObj、trObj和tdObj，它們就象太空中4顆人造衛星一樣，彼此間以及和文檔中的現有節點間都互不關聯。創建孤立節點的目的不是為了讓它真正孤立，隨后我們會介紹如何將創建的孤立節點彼此相連，并添加到文檔的DOM Tree結構中。
使用cloneNode方法
cloneNode方法的功能是通過克隆（也就是復制）文檔中一個現存節點的方式創建文檔的一個孤立節點。根據被克隆節點的類型，新創建的孤立節點或者是HTML標記節點，或者是包含字符串信息的文本項節點。cloneNode的語法為oldNode.createNode(false)或者oldNode.createNode(true)，oldNode表示被克隆的節點，返回值是新創建的節點，false表示僅僅克隆oldNode，true表示克隆oldNode并包含其下屬節點。來看看下面的例子：
<head>
<title>DOM Demo </title>
</head>
<body id="bodyNode">
<script language="JavaScript">
<!--
alert("頁面初始狀態");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
tr1Obj = document.createElement("TR");
tr2Obj = tr1Obj.cloneNode(false);
tr3Obj = tr1Obj.cloneNode(false);
tr1td1Obj = document.createElement("TD");
tr1td2Obj = tr1td1Obj.cloneNode(false);
tr2td1Obj = tr1td1Obj.cloneNode(false);
tr2td2Obj = tr1td1Obj.cloneNode(false);
tr3td1Obj = tr1td1Obj.cloneNode(false);
tr3td2Obj = tr1td1Obj.cloneNode(false);
row1cell1Obj = document.createTextNode("This is row 1, cell 1");
row1cell2Obj = row1cell1Obj.cloneNode(false);
row2cell1Obj = row1cell1Obj.cloneNode(false);
row2cell2Obj = row1cell1Obj.cloneNode(false);
row3cell1Obj = row1cell1Obj.cloneNode(false);
row3cell2Obj = row1cell1Obj.cloneNode(false);
row1cell2Obj.nodeValue = "This is row 1, cell 2";
row2cell1Obj.nodeValue = "This is row 2, cell 1";
row2cell2Obj.nodeValue = "This is row 2, cell 2";
row3cell1Obj.nodeValue = "This is row 3, cell 1";
row3cell2Obj.nodeValue = "This is row 3, cell 2";
alert(
"對頁面內容進行修改后" + "\n" +
"row1cell2Obj.firstChild = " + row1cell2Obj.firstChild + "\n" +
"row1cell2Obj = " + row1cell2Obj + "\n" +
"row3cell2Obj.nodeValue = " + row3cell2Obj.nodeValue + "\n" +
"tr3td2Obj.nodeName = " + tr3td2Obj.nodeName + "\n"
);
// -->
</script>
</body>
</html>
上述代碼中值得注意的是對文本項節點的處理方式：
1、首先，使用語句row1cell1Obj = document.createTextNode("This is row 1, cell 1")創建單元格（1，1）所在節點；
2、然后使用語句row1cell1Obj.cloneNode(false)分別創建其他單元格節點；
3、最后，使用語句node.nodeValue = string分別為不同單元格賦值。
使用appendChild方法
appendChild方法的功能是在2個節點間建立起父子關系，如果作為父親的節點已經具有了孩子節點，那么新添加的孩子節點被追加為最后一個孩子，也就是lastChild。appendChild的語法是fatherObj.appendChild(childObj)，返回值是被追加的孩子節點。來看看下面的例子：
<head>
<title>DOM Demo </title>
</head>
<body id="bodyNode">
<script language="JavaScript">
<!--
alert("頁面初始狀態");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
tr1Obj = document.createElement("TR");
tr2Obj = tr1Obj.cloneNode();
tr3Obj = tr1Obj.cloneNode();
tr1td1Obj = document.createElement("TD");
tr1td2Obj = tr1td1Obj.cloneNode();
tr2td1Obj = tr1td1Obj.cloneNode();
tr2td2Obj = tr1td1Obj.cloneNode();
tr3td1Obj = tr1td1Obj.cloneNode();
tr3td2Obj = tr1td1Obj.cloneNode();
row1cell1Obj = document.createTextNode("This is row 1, cell 1");
row1cell2Obj = row1cell1Obj.cloneNode();
row2cell1Obj = row1cell1Obj.cloneNode();
row2cell2Obj = row1cell1Obj.cloneNode();
row3cell1Obj = row1cell1Obj.cloneNode();
row3cell2Obj = row1cell1Obj.cloneNode();
row1cell2Obj.nodeValue = "This is row 1, cell 2";
row2cell1Obj.nodeValue = "This is row 2, cell 1";
row2cell2Obj.nodeValue = "This is row 2, cell 2";
row3cell1Obj.nodeValue = "This is row 3, cell 1";
row3cell2Obj.nodeValue = "This is row 3, cell 2";
returnValue = tableObj.appendChild(tbodyObj);
tbodyObj.appendChild(tr1Obj);
tbodyObj.appendChild(tr2Obj);
tbodyObj.appendChild(tr3Obj);
tr1Obj.appendChild(tr1td1Obj);
tr1Obj.appendChild(tr1td2Obj);
tr2Obj.appendChild(tr2td1Obj);
tr2Obj.appendChild(tr2td2Obj);
tr3Obj.appendChild(tr3td1Obj);
tr3Obj.appendChild(tr3td2Obj);
tr1td1Obj.appendChild(row1cell1Obj);
tr1td2Obj.appendChild(row1cell2Obj);
tr2td1Obj.appendChild(row2cell1Obj);
tr2td2Obj.appendChild(row2cell2Obj);
tr3td1Obj.appendChild(row3cell1Obj);
tr3td2Obj.appendChild(row3cell2Obj);
bodyNode.appendChild(tableObj);
alert("對頁面內容進行修改后");
// -->
</script>
</body>
</html>
上面的代碼演示了一個Table的動態創建過程。首先創建Table的各個行、列以及單元格的節點，然后使用appendChild將這些節點進行連接形成一個Table，最后通過語句bodyNode.appendChild(tableObj)將Table裝載進文檔中。
使用applyElement方法
applyElement方法的功能是將一個節點與它的孩子節點和父親節點脫離，然后將另外一個節點連接到這個節點，最終使它們成為父子關系。applyElement的語法是childObj.applyElement(fatherObj)，返回值是被連接的孩子節點。
我們注意到，applyElement和appendChild實現的目的基本相同，都是在2個節點間建立父子關系，但有2個區別：
1、applyElement方法只能操縱HTML標記節點，不能處理文本項節點。appendNode則能處理2種節點。
2、appendNode對2個節點的連接方式是從父到子，applyElement則是從子到父。
來看看下面的例子：
<head>
<title>DOM Demo </title>
</head>
<body id="bodyNode">
<script language="JavaScript">
<!--
alert("頁面初始狀態");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
tr1Obj = document.createElement("TR");
tr2Obj = tr1Obj.cloneNode();
tr3Obj = tr1Obj.cloneNode();
tr1td1Obj = document.createElement("TD");
tr1td2Obj = tr1td1Obj.cloneNode();
tr2td1Obj = tr1td1Obj.cloneNode();
tr2td2Obj = tr1td1Obj.cloneNode();
tr3td1Obj = tr1td1Obj.cloneNode();
tr3td2Obj = tr1td1Obj.cloneNode();
row1cell1Obj = document.createTextNode("This is row 1, cell 1");
row1cell2Obj = row1cell1Obj.cloneNode();
row2cell1Obj = row1cell1Obj.cloneNode();
row2cell2Obj = row1cell1Obj.cloneNode();
row3cell1Obj = row1cell1Obj.cloneNode();
row3cell2Obj = row1cell1Obj.cloneNode();
row1cell2Obj.nodeValue = "This is row 1, cell 2";
row2cell1Obj.nodeValue = "This is row 2, cell 1";
row2cell2Obj.nodeValue = "This is row 2, cell 2";
row3cell1Obj.nodeValue = "This is row 3, cell 1";
row3cell2Obj.nodeValue = "This is row 3, cell 2";
tr1td1Obj.appendChild(row1cell1Obj);
tr1td2Obj.appendChild(row1cell2Obj);
tr2td1Obj.appendChild(row2cell1Obj);
tr2td2Obj.appendChild(row2cell2Obj);
tr3td1Obj.appendChild(row3cell1Obj);
tr3td2Obj.appendChild(row3cell2Obj);
tr1td1Obj.applyElement(tr1Obj);
tr1Obj.appendChild(tr1td2Obj);
tr2td1Obj.applyElement(tr2Obj);
tr2Obj.appendChild(tr2td2Obj);
tr3td1Obj.applyElement(tr3Obj);
tr3Obj.appendChild(tr3td2Obj);
tr1Obj.applyElement(tbodyObj);
tbodyObj.appendChild(tr2Obj);
tbodyObj.appendChild(tr3Obj);
returnValue = tbodyObj.applyElement(tableObj);
bodyNode.appendChild(tableObj);
alert("對頁面內容進行修改后");
// -->
</script>
</body>
</html>
上面的代碼同樣演示了一個Table的動態創建過程。首先創建Table的各個行、列以及單元格的節點，然后混合使用applyElement和appendChild將這些節點進行連接形成一個Table，最后通過語句bodyNode.appendChild(tableObj)將Table裝載進文檔中。
留言列表
