JavaScript針對網頁節點的增刪改查用法實例_javascript技巧

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

一、基本概念

這部分也就是所謂的“HTML DOM”，所謂HTML DOM也就是Web頁面載入規則，是一個規則，也就是網頁組成的基本公式。

也就是所有網頁都必須依照：

…的規則來寫，也依照這樣的規則載入。

所謂的“網頁節點”，也叫“DOM節點”的通俗解釋，例如html節點下的內容就是之間的所有內容，body節點下的內容就是

body>之間的所有內容。

HTML DOM是這樣規定的：1、整個文件是一個文檔節點；2、每個HTML 標籤（意指

等html標籤，而不是單純的標籤）是一個元素節點；3、包含在HTML 元素中的文字是文字節點；4、每一個HTML 屬性是屬性節點
譬如，可以把某頁畫成如下的DOM節點樹：

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

而使用JavaScript能輕鬆對於這些DOM節點進行網頁節點的增刪改查的控制。

二、基本目標

使用JavaScript對網頁的節點進行增刪改查的操作。在一個網頁中有：

1、」增加節點「按鈕，此按鈕在增加節點的同時，增加與」替換按鈕「相關聯的下拉式選單中的節點選項。如果網頁中存在9個節點，則不讓新增並彈出式警告。

2、」刪除最後一個節點「按鈕，此按鈕在減少節點的同時，減少與」替換按鈕「相關聯的下拉式選單中的節點選項。

3、」取代節點內容「按鈕，先選擇需要操作的節點，然後輸入要替換的內容，就會取代對應的節點。

4、如果網頁中沒有任何節點，則不讓刪除與替換，並彈出視窗警告。

三、製作過程

不用設定任何環境，直接在網頁中寫入如下程式碼，具體程式碼如下，以下再部分一部分進行說明：

複製程式碼 程式碼如下:

 
 
     
         
        jsdivnode標題> 
 
變數我 = 0; 
 
函數createnode() { 
    如果 (i         我 ; 
        var option = document.createElement("option"); 
        選項.值 = i; 
        option.innerHTML = "Node" i.toString(); 
        document.getElementById("number").appendChild(選項); 
 
        var p = document.createElement("p"); 
        p.innerHTML = "節點" i.toString(); 
        document.getElementById("d").appendChild(p); 
    } 其他 
        alert("爺行行好了，太多節點，臣妾做不到啊～"); 
} 
 
函數removenode() { 
    如果 (i > 0) { 
        我 - ; 
        var s = document.getElementById("number"); 
        s.removeChild(s.lastChild); 
        var d = document.getElementById("d"); 
        d.removeChild(d.lastChild); 
    } 其他 
        alert("沒有節點，刪除毛線啊～"); 
 
    /*var ps = d.getElementsByTagName("p");*/ 
    /*document.getElementById("d").removeChild(ps[9]); */ 
} 
 
函數replacenode() { 
    如果 (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]); 
    } 其他 
        alert("沒有節點，替換個毛線啊~"); 
} 
腳本> 
    頭> 
 
     
        > 
        > 
        選擇> 
         
         
       

 
       

 
    正文> 

1、節點

複製程式碼程式碼如下：

 
     
     
     
        
     
        
     
        
     
        
   

 
   

 

2、節點

複製程式碼 程式碼如下:

 
     
         
         
 

希望本文所述對大家的javascript程式設計有所幫助。