|
|
我們知道，如果使用DHTML對象模型對文檔的內(nèi)容進(jìn)行操縱，就必須了解相關(guān)文檔元素的特殊屬性和方法。因?yàn)槲臋n的元素有很多種，相應(yīng)的屬性和方法也就非常多，為了實(shí)現(xiàn)一個(gè)功能，開發(fā)人員不得不查詢許多資料。但是有了DOM技術(shù)，一切變得簡單起來，那些操縱文檔內(nèi)容的屬性和方法具備了元素?zé)o關(guān)性（element-independent）特點(diǎn)，這使得我們能夠按照相同的步驟操縱文檔內(nèi)容。毋庸置疑，DOM技術(shù)為開發(fā)人員在對象層次上操縱文檔提供了最便捷的手段。
本文就為你全面介紹在JavaScript中如何使用DOM屬性和方法操縱文檔內(nèi)容。
使用data、nodeValue和src屬性
DOM提供了2個(gè)屬性用于修改文本節(jié)點(diǎn)的內(nèi)容，它們是data和nodeVaule。2個(gè)屬性實(shí)現(xiàn)的功能相同，語法是：object.data="new value"或者object.nodeVaule="new value"，其中object代表頁面中的文本項(xiàng)節(jié)點(diǎn)。如果修改圖形文件的內(nèi)容，語法是：object.src="new value"，其中object表示頁面中的img標(biāo)記節(jié)點(diǎn)。來看看下面的例子：
<html>
<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("頁面初始狀態(tài)" + "/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èi)容進(jìn)行修改后" + "/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>使用insertBefore方法
insertBefore方法的功能和appendChild相似，都是將一個(gè)孩子節(jié)點(diǎn)連接到一個(gè)父親節(jié)點(diǎn)，但insertBefore方法允許我們指定孩子節(jié)點(diǎn)的位置。insertBefore的語法是fatherObj.insertBefore(childObj, brotherObj)，返回值是被連接的孩子節(jié)點(diǎn)。執(zhí)行后，childObj的位置在brotherObj之前。來看看下面的例子：
<html>
<head>
<title>DOM Demo </title>
</head>
<body id="bodyNode">
<script language="JavaScript">
<!--
alert("頁面初始狀態(tài)");
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.insertBefore(tbodyObj);
tbodyObj.insertBefore(tr3Obj);
tbodyObj.insertBefore(tr2Obj, tr3Obj);
tbodyObj.insertBefore(tr1Obj, tr2Obj);
tr1Obj.insertBefore(tr1td2Obj);
tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);
tr2Obj.insertBefore(tr2td2Obj);
tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);
tr3Obj.insertBefore(tr3td2Obj);
tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);
tr1td2Obj.insertBefore(row1cell2Obj);
tr1td1Obj.insertBefore(row1cell1Obj);
tr2td2Obj.insertBefore(row2cell2Obj);
tr2td1Obj.insertBefore(row2cell1Obj);
tr3td2Obj.insertBefore(row3cell2Obj);
tr3td1Obj.insertBefore(row3cell1Obj);
bodyNode.insertBefore(tableObj);
// -->
</script>
</body>
</html>
it知識庫：使用DOM技術(shù)操縱文檔，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
