本文實(shí)例講述了JavaScript針對網(wǎng)頁節(jié)點(diǎn)的增刪改查用法。分享給大家供大家參考。具體分析如下：
一、基本概念
這部分也就是所謂的“HTML DOM”，所謂HTML DOM也就是Web頁面加載規(guī)則，是一個(gè)規(guī)則，也就是網(wǎng)頁組成的基本公式。
也就是所有網(wǎng)頁都必須按照：<html><body></body></html>……的規(guī)則編寫，也按照這樣的規(guī)則加載。
所謂的“網(wǎng)頁節(jié)點(diǎn)”，也叫“DOM節(jié)點(diǎn)”的通俗解釋，例如html節(jié)點(diǎn)下的內(nèi)容就是<html></html>之間所有內(nèi)容，body節(jié)點(diǎn)下的內(nèi)容就是<body></body>之間的所有內(nèi)容。
HTML DOM是這樣規(guī)定的：1、整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)；2、每個(gè) HTML 標(biāo)簽（意指<body><table>等html標(biāo)簽，而不是單純的<html>標(biāo)簽）是一個(gè)元素節(jié)點(diǎn)；3、包含在 HTML 元素中的文本是文本節(jié)點(diǎn)；4、每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
譬如，可以把某個(gè)頁面畫成如下的DOM節(jié)點(diǎn)樹：
HTML DOM的官方定義如下：HTML DOM是HTML Document Object Model(文檔對象模型)的縮寫，HTML DOM則是專門適用與HTML/XHTML的文檔對象模型。熟悉軟件開發(fā)的人員可以將HTML DOM理解為網(wǎng)頁的API。它將網(wǎng)頁中的各個(gè)元素都看作一個(gè)個(gè)對象，從而使網(wǎng)頁中的元素也可以被計(jì)算機(jī)語言獲取或者編輯。 例如Javascript就可以利用HTML DOM動(dòng)態(tài)的修改網(wǎng)頁。
而使用JavaScript能輕松對于這些DOM節(jié)點(diǎn)進(jìn)行網(wǎng)頁節(jié)點(diǎn)的增刪改查的控制。
二、基本目標(biāo)
使用JavaScript對網(wǎng)頁的節(jié)點(diǎn)進(jìn)行增刪改查的操作。在一個(gè)網(wǎng)頁中有：
1、”增加節(jié)點(diǎn)“按鈕，此按鈕在增加節(jié)點(diǎn)的同時(shí)，增加與”替換按鈕“相關(guān)聯(lián)的下拉菜單中的節(jié)點(diǎn)選項(xiàng)。如果網(wǎng)頁中存在著9個(gè)節(jié)點(diǎn)，則不讓添加并彈窗警告。
2、”刪除最后一個(gè)節(jié)點(diǎn)“按鈕，此按鈕在減少節(jié)點(diǎn)的同時(shí)，減少與”替換按鈕“相關(guān)聯(lián)的下拉菜單中的節(jié)點(diǎn)選項(xiàng)。
3、”替換節(jié)點(diǎn)內(nèi)容“按鈕，首先選擇需要操作的節(jié)點(diǎn)，然后輸入要替換的內(nèi)容，就會(huì)替換相應(yīng)的節(jié)點(diǎn)。
4、如果網(wǎng)頁中沒有任何節(jié)點(diǎn)，則不讓刪除與替換，并彈窗警告。
三、制作過程
不用配置任何環(huán)境，直接在網(wǎng)頁中寫入如下代碼，具體代碼如下，下面再一部分一部分進(jìn)行說明：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsdivnode</title>
<script type="text/javascript">
var i = 0;
function createnode() {
if (i < 9) {
i++;
var option = document.createElement("option");
option.value = i;
option.innerHTML = "Node" + i.toString();
document.getElementById("number").appendChild(option);
var p = document.createElement("p");
p.innerHTML = "Node" + i.toString();
document.getElementById("d").appendChild(p);
} else
alert("爺行行好了，太多節(jié)點(diǎn)，臣妾做不到啊~");
}
function removenode() {
if (i > 0) {
i--;
var s = document.getElementById("number");
s.removeChild(s.lastChild);
var d = document.getElementById("d");
d.removeChild(d.lastChild);
} else
alert("沒有節(jié)點(diǎn)，刪個(gè)毛線啊~");
/*var ps = d.getElementsByTagName("p");*/
/*document.getElementById("d").removeChild(ps[9]); */
}
function replacenode() {
if (i > 0) {
var d = document.getElementById("d");
var p = document.createElement("p");
p.innerHTML = document.getElementById("text").value;
var ps = d.getElementsByTagName("p")
d.replaceChild(p, ps[document.getElementById("number").value - 1]);
} else
alert("沒有節(jié)點(diǎn)，替換個(gè)毛線啊~");
}
</script>
</head>
<body>
<input type="button" value="創(chuàng)建節(jié)點(diǎn)" onclick="createnode()" />
<input type="button" value="刪除最后一個(gè)節(jié)點(diǎn)" onclick="removenode()" />
<select id="number"></select>
<input type="text" id="text" />
<input type="button" value="替換節(jié)點(diǎn)內(nèi)容" onclick="replacenode()" />
<div id="d">
</div>
</body>
</html>
1、<body>節(jié)點(diǎn)
<!--按鈕x2，此兩個(gè)按鈕都有onclick動(dòng)作指向相應(yīng)的函數(shù)-->
<input type="button" value="創(chuàng)建節(jié)點(diǎn)" onclick="createnode()" />
<input type="button" value="刪除最后一個(gè)節(jié)點(diǎn)" onclick="removenode()" />
<!--一個(gè)沒有<option>子節(jié)點(diǎn)的下拉菜單，由createnode()節(jié)點(diǎn)的同時(shí)，同時(shí)添加。-->
<select id="number"></select>
<!--輸入框x1，注意設(shè)置好id，replacenode()要取這個(gè)文本框的值-->
<input type="text" id="text" />
<!--按鈕x1，同上面的按鈕x2-->
<input type="button" value="替換節(jié)點(diǎn)內(nèi)容" onclick="replacenode()" />
<!--一個(gè)什么都沒有的空圖層，作為<p>的父節(jié)點(diǎn)，添加的<p>皆是此<div>節(jié)點(diǎn)的子節(jié)點(diǎn)-->
<div id="d">
</div>
</body>
2、<head>節(jié)點(diǎn)
<!--網(wǎng)頁使用的編碼、標(biāo)題，這不重要，關(guān)鍵是下面的js腳本部分-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsdivnode</title>
<script type="text/javascript">
/*記錄了當(dāng)前網(wǎng)頁有多少個(gè)節(jié)點(diǎn)的全局變量*/
var i = 0;
/*下方有3個(gè)函數(shù)。當(dāng)按鈕被點(diǎn)擊時(shí)候則被調(diào)用*/
function createnode() {
/*如果網(wǎng)頁中的節(jié)點(diǎn)少于9個(gè)，才工作，否則彈窗*/
if (i < 9) {
/*每多加一個(gè)節(jié)點(diǎn)，記錄了當(dāng)前網(wǎng)頁有多少個(gè)節(jié)點(diǎn)的全局變量i+1*/
i++;
/*創(chuàng)建option節(jié)點(diǎn)，然后其指針名字也叫option*/
var option = document.createElement("option");
/*聲明創(chuàng)建的option節(jié)點(diǎn)的value屬性為當(dāng)前i的值，也就是當(dāng)i=1時(shí)，有<option value=1></option>這樣的子節(jié)點(diǎn)了。*/
/*部分網(wǎng)頁說用setAttribute()方法去設(shè)置屬性，親自實(shí)踐發(fā)現(xiàn)并不好用*/
option.value = i;
/*設(shè)置option節(jié)點(diǎn)下面的文本，此語句過后，子節(jié)點(diǎn)變?yōu)?lt;option value=1>Node1</option>*/
option.innerHTML = "Node" + i.toString();
/*<select>父節(jié)點(diǎn)的ID是number，此語句要求在在<select></select>父節(jié)點(diǎn)下增加<option value=1>Node1</option>*/
document.getElementById("number").appendChild(option);
/*道理與上面同，在<div>父節(jié)點(diǎn)下增加<p>子節(jié)點(diǎn)，且<p>子節(jié)點(diǎn)下的文本值為Node1*/
var p = document.createElement("p");
p.innerHTML = "Node" + i.toString();
document.getElementById("d").appendChild(p);
} else
alert("爺行行好了，太多節(jié)點(diǎn)，臣妾做不到啊~");
}
function removenode() {
/*如果網(wǎng)頁中的節(jié)點(diǎn)多于0個(gè)，也就是存在節(jié)點(diǎn)，才工作，否則彈窗*/
if (i > 0) {
/*每減少一個(gè)節(jié)點(diǎn)，記錄了當(dāng)前網(wǎng)頁有多少個(gè)節(jié)點(diǎn)的全局變量i-1*/
i--;
/*定義指向<select>父節(jié)點(diǎn)的指針s*/
var s = document.getElementById("number");
/*刪除<select>父節(jié)點(diǎn)旗下的最后一個(gè)子節(jié)點(diǎn)，也就是<option>，如果你要?jiǎng)h第一個(gè)則參數(shù)變?yōu)閟.firstChild*/
s.removeChild(s.lastChild);
/*道理同上，刪除<div>圖層下的最后一個(gè)子節(jié)點(diǎn)*/
var d = document.getElementById("d");
d.removeChild(d.lastChild);
/*如果你要?jiǎng)h除<div>下的第8個(gè)<p>請如下操作*/
/*ps是指向<p>子節(jié)點(diǎn)集的指針*/
/*var ps = d.getElementsByTagName("p");*/
/*document.getElementById("d").removeChild(ps[9]); */
} else
alert("沒有節(jié)點(diǎn)，刪個(gè)毛線啊~");
}
function replacenode() {
/*如果網(wǎng)頁中的節(jié)點(diǎn)多于0個(gè)，也就是存在節(jié)點(diǎn)，才工作，否則彈窗*/
if (i > 0) {
/*定義指向<div>父節(jié)點(diǎn)的指針d*/
var d = document.getElementById("d");
/*創(chuàng)建一個(gè)<p></p>節(jié)點(diǎn)*/
var p = document.createElement("p");
/*拿到文本框所輸入的東西，放到<p></p>節(jié)點(diǎn)里面*/
p.innerHTML = document.getElementById("text").value;
/*ps是指向<div>父節(jié)點(diǎn)下的<p>子節(jié)點(diǎn)集、子節(jié)點(diǎn)群的指針*/
var ps = d.getElementsByTagName("p")
/*讓剛剛創(chuàng)建的節(jié)點(diǎn)替換<div>下的第n個(gè)<p>子節(jié)點(diǎn)，其中n是現(xiàn)在下拉列表所選擇的值-1，之所以要-1，是因?yàn)樽庸?jié)點(diǎn)集、子節(jié)點(diǎn)群的計(jì)數(shù)是從0開始的，而我們?nèi)说挠?jì)數(shù)是從1開始的。*/
d.replaceChild(p, ps[document.getElementById("number").value - 1]);
} else
alert("沒有節(jié)點(diǎn)，替換個(gè)毛線啊~");
}
</script>
</head>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
