快捷導(dǎo)航

JavaScript針對網(wǎng)頁節(jié)點的增刪改查用法實例

更新時間：2015年02月02日 14:59:42 作者：yongh701

這篇文章主要介紹了JavaScript針對網(wǎng)頁節(jié)點的增刪改查用法,實例分析了JavaScript操作網(wǎng)頁節(jié)點的技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了JavaScript針對網(wǎng)頁節(jié)點的增刪改查用法。分享給大家供大家參考。具體分析如下：

一、基本概念

這部分也就是所謂的“HTML DOM”，所謂HTML DOM也就是Web頁面加載規(guī)則，是一個規(guī)則，也就是網(wǎng)頁組成的基本公式。

也就是所有網(wǎng)頁都必須按照：<html><body></body></html>……的規(guī)則編寫，也按照這樣的規(guī)則加載。

所謂的“網(wǎng)頁節(jié)點”，也叫“DOM節(jié)點”的通俗解釋，例如html節(jié)點下的內(nèi)容就是<html></html>之間所有內(nèi)容，body節(jié)點下的內(nèi)容就是<body></body>之間的所有內(nèi)容。

HTML DOM是這樣規(guī)定的：1、整個文檔是一個文檔節(jié)點；2、每個 HTML 標簽（意指<body><table>等html標簽，而不是單純的<html>標簽）是一個元素節(jié)點；3、包含在 HTML 元素中的文本是文本節(jié)點；4、每一個 HTML 屬性是一個屬性節(jié)點
譬如，可以把某個頁面畫成如下的DOM節(jié)點樹：

HTML DOM的官方定義如下：HTML DOM是HTML Document Object Model(文檔對象模型)的縮寫，HTML DOM則是專門適用與HTML/XHTML的文檔對象模型。熟悉軟件開發(fā)的人員可以將HTML DOM理解為網(wǎng)頁的API。它將網(wǎng)頁中的各個元素都看作一個個對象，從而使網(wǎng)頁中的元素也可以被計算機語言獲取或者編輯。例如Javascript就可以利用HTML DOM動態(tài)的修改網(wǎng)頁。

而使用JavaScript能輕松對于這些DOM節(jié)點進行網(wǎng)頁節(jié)點的增刪改查的控制。

二、基本目標

使用JavaScript對網(wǎng)頁的節(jié)點進行增刪改查的操作。在一個網(wǎng)頁中有：

1、”增加節(jié)點“按鈕，此按鈕在增加節(jié)點的同時，增加與”替換按鈕“相關(guān)聯(lián)的下拉菜單中的節(jié)點選項。如果網(wǎng)頁中存在著9個節(jié)點，則不讓添加并彈窗警告。

2、”刪除最后一個節(jié)點“按鈕，此按鈕在減少節(jié)點的同時，減少與”替換按鈕“相關(guān)聯(lián)的下拉菜單中的節(jié)點選項。

3、”替換節(jié)點內(nèi)容“按鈕，首先選擇需要操作的節(jié)點，然后輸入要替換的內(nèi)容，就會替換相應(yīng)的節(jié)點。

4、如果網(wǎng)頁中沒有任何節(jié)點，則不讓刪除與替換，并彈窗警告。

三、制作過程

不用配置任何環(huán)境，直接在網(wǎng)頁中寫入如下代碼，具體代碼如下，下面再一部分一部分進行說明：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//pD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/pD/xhtml1-transitional.dtd">  

<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é)點，臣妾做不到啊~");  

}  

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é)點，刪個毛線啊~");  

    /*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é)點，替換個毛線啊~");  

}  

</script>  

    </head>  

    <body>  

        <input type="button" value="創(chuàng)建節(jié)點" onclick="createnode()" />  

        <input type="button" value="刪除最后一個節(jié)點" onclick="removenode()" />  

        <select id="number"></select>  

        <input type="text" id="text" />  

        <input type="button" value="替換節(jié)點內(nèi)容" onclick="replacenode()" />  

        <div id="d">  

        </div>  

    </body>  

</html>

1、<body>節(jié)點

復(fù)制代碼代碼如下:

<body>  

    <!--按鈕x2，此兩個按鈕都有onclick動作指向相應(yīng)的函數(shù)-->  

    <input type="button" value="創(chuàng)建節(jié)點" onclick="createnode()" />  

    <input type="button" value="刪除最后一個節(jié)點" onclick="removenode()" />  

       <!--一個沒有<option>子節(jié)點的下拉菜單，由createnode()節(jié)點的同時，同時添加。-->  

    <select id="number"></select>  

       <!--輸入框x1，注意設(shè)置好id，replacenode()要取這個文本框的值-->  

    <input type="text" id="text" />  

       <!--按鈕x1，同上面的按鈕x2-->  

    <input type="button" value="替換節(jié)點內(nèi)容" onclick="replacenode()" />  

       <!--一個什么都沒有的空圖層，作為<p>的父節(jié)點，添加的<p>皆是此<div>節(jié)點的子節(jié)點-->  

    <div id="d">  

    </div>  

</body>

2、<head>節(jié)點

復(fù)制代碼代碼如下:

<head>  

    <!--網(wǎng)頁使用的編碼、標題，這不重要，關(guān)鍵是下面的js腳本部分-->  

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

        <title>jsdivnode</title>  

<script type="text/javascript">  

/*記錄了當前網(wǎng)頁有多少個節(jié)點的全局變量*/  

var i = 0;  

/*下方有3個函數(shù)。當按鈕被點擊時候則被調(diào)用*/  

function createnode() {  

    /*如果網(wǎng)頁中的節(jié)點少于9個，才工作，否則彈窗*/  

    if (i < 9) {  

        /*每多加一個節(jié)點，記錄了當前網(wǎng)頁有多少個節(jié)點的全局變量i+1*/  

        i++;  

        /*創(chuàng)建option節(jié)點，然后其指針名字也叫option*/  

        var option = document.createElement("option");  

        /*聲明創(chuàng)建的option節(jié)點的value屬性為當前i的值，也就是當i=1時，有<option value=1></option>這樣的子節(jié)點了。*/  

        /*部分網(wǎng)頁說用setAttribute()方法去設(shè)置屬性，親自實踐發(fā)現(xiàn)并不好用*/  

        option.value = i;  

        /*設(shè)置option節(jié)點下面的文本，此語句過后，子節(jié)點變?yōu)?lt;option value=1>Node1</option>*/  

        option.innerHTML = "Node" + i.toString();  

        /*<select>父節(jié)點的ID是number，此語句要求在在<select></select>父節(jié)點下增加<option value=1>Node1</option>*/  

        document.getElementById("number").appendChild(option);  

        /*道理與上面同，在<div>父節(jié)點下增加<p>子節(jié)點，且<p>子節(jié)點下的文本值為Node1*/  

        var p = document.createElement("p");  

        p.innerHTML = "Node" + i.toString();  

        document.getElementById("d").appendChild(p);  

    } else  

        alert("爺行行好了，太多節(jié)點，臣妾做不到啊~");  

}  

function removenode() {  

    /*如果網(wǎng)頁中的節(jié)點多于0個，也就是存在節(jié)點，才工作，否則彈窗*/  

    if (i > 0) {  

        /*每減少一個節(jié)點，記錄了當前網(wǎng)頁有多少個節(jié)點的全局變量i-1*/  

        i--;  

        /*定義指向<select>父節(jié)點的指針s*/  

        var s = document.getElementById("number");  

        /*刪除<select>父節(jié)點旗下的最后一個子節(jié)點，也就是<option>，如果你要刪第一個則參數(shù)變?yōu)閟.firstChild*/  

        s.removeChild(s.lastChild);  

        /*道理同上，刪除<div>圖層下的最后一個子節(jié)點*/  

        var d = document.getElementById("d");  

        d.removeChild(d.lastChild);  

        /*如果你要刪除<div>下的第8個<p>請如下操作*/      

        /*ps是指向<p>子節(jié)點集的指針*/  

        /*var ps = d.getElementsByTagName("p");*/  

        /*document.getElementById("d").removeChild(ps[9]); */  

    } else  

        alert("沒有節(jié)點，刪個毛線啊~");  

}  

function replacenode() {  

    /*如果網(wǎng)頁中的節(jié)點多于0個，也就是存在節(jié)點，才工作，否則彈窗*/  

    if (i > 0) {  

        /*定義指向<div>父節(jié)點的指針d*/  

        var d = document.getElementById("d");  

        /*創(chuàng)建一個<p></p>節(jié)點*/  

        var p = document.createElement("p");  

        /*拿到文本框所輸入的東西，放到<p></p>節(jié)點里面*/  

        p.innerHTML = document.getElementById("text").value;  

        /*ps是指向<div>父節(jié)點下的<p>子節(jié)點集、子節(jié)點群的指針*/  

        var ps = d.getElementsByTagName("p")  

        /*讓剛剛創(chuàng)建的節(jié)點替換<div>下的第n個<p>子節(jié)點，其中n是現(xiàn)在下拉列表所選擇的值-1，之所以要-1，是因為子節(jié)點集、子節(jié)點群的計數(shù)是從0開始的，而我們?nèi)说挠嫈?shù)是從1開始的。*/  

        d.replaceChild(p, ps[document.getElementById("number").value - 1]);  

    } else  

        alert("沒有節(jié)點，替換個毛線啊~");  

}  

</script>  

</head>