《JavaScript》——DOM

標籤：圖例   pass   mod   idt   指標   function   今後   val   操作   

    DOM （Document Object Model） 即文件物件模型， 針對 HTML 和 XML 文檔的 API （應用程式介面） 。DOM 描繪了一個層次化的節點樹，執行開發人員加入、移除和改動頁面的某一部分。

    DOM中提供了兩個節點介面，一個Node介面，一個是document介面，這兩種介面的屬性和方法基本包括了對節點樹的全部操作。

那什麼是節點樹那？

    節點樹：載入 HTML 頁面時， 網頁瀏覽器產生一個樹型結構， 用來表示頁面內部結構。 DOM 將這樣的樹型結構理解為由節點群組成。

比方例如以下HTML代碼：     

<html><head><title>DOM</title><meta http-equiv="Content-type" content="text/html;charset=gb2312"/></head><body><p>請先登入</p><form name="myForm">姓名：<input type="text" name="myName">密碼：<input type ="password" name="myPassword"><input type="button" value="確定"></form></body></html>

     產生的節點樹例如以下所看到的：

       

     從節點樹中大致能夠看出，節點分為三種類型，元素節點，文本節點、屬性節點。DOM中提供的Document介面和Node介面的方法與屬性就是對這些節點進行操作（增刪改查）。

     上面說了，我們利用文檔介面（Document）的一些方法對HTML節點樹的操作就是一些增刪改查，那麼在增刪改查之前，我們的先得有節點吧。這些節點能夠直接在HTML中編寫，也能夠用JavaScript指令碼建立，當然了，這裡用JavaScript建立節點的優點在於能夠動態對HTML文檔進行改動。避免了在HTML介面直接改動代碼，這樣不僅達到了HTML頁面與JavaScript指令碼解耦和的作用。並且還能夠實現JavaScript指令碼動態操縱HTML頁面。

     以下這幅圖片是文檔介面（Document） 的部分屬性與方法

     

    從上面的圖片能夠看出，Document介面的方法能夠用來建立或獲得一個節點，建立分成三種，即元素節點、屬性節點、文本節點，訪問方法分為兩種。

遺憾的是我所列舉的方法與屬性都不全，只是這些方法都是一些經常使用的。

    以下在介紹一些Node節點關係與節點類型，還包含Node介面的一些方法，這些方法側重於增刪改查。

    

   在上面這幅圖片中。Node介面中加入節點的方法有兩個，對節點的操作還有刪除、替換、複製等操作。

   貼張HTML代碼文檔，以下的一些操作都是針對這部分HTML代碼進行的。          

<html> <head> <meta http-equiv="Content-type" content="text/html;charset=gb2312"/> <title>DOM基礎</title> <script type="text/javascript"  src="demo.js"> </script> </head> <body  >   <div  align="center">開始</div>    <div id="box" align="center" title="標題" class="pox" style="color:red;" ><p>測試div1</p><p>測試div2</p><p>測試div3</p></div><div align="center" >結束</div> </body> </html>

    1、建立元素節點p，和文本節點tex。而且在元素節點p以下加入文本節點text。代碼和對照例如以下 

window.onload=function(){var box=document.getElementById(‘box‘);// 尋找box節點var p =document.createElement(‘p‘);//僅僅是建立元素節點p 。還沒有加入到文檔中去，僅僅是駐留在記憶體中。box.appendChild(p);//加入節點。p為節點的名稱。
var text =document.createTextNode(‘此節點為當前節點的最後一個子節點‘);//建立文本節點text 主流在記憶體中。還沒有加入到HTML中去。
p.appendChild(text);//給p節點加入文本元素};

   

                                  

   2、插入節點（在某節點之前插入）          

window.onload=function(){var box=document.getElementById(‘box‘);var div =document.createElement(‘div‘);//僅僅是建立元素節點p 還沒有加入到文檔中去。僅僅是駐留在記憶體中。
box.parentNode.insertBefore(div,box);  //先將指標跳到插入位置的父節點，然後在運行插入var text =document.createTextNode(‘測試一下啊！‘);//建立文本節點textdiv.appendChild(text);//給p節點加入文本元素};

    3、自己定義方法。插入節點（在某節點之後）

// 插入節點（在某節點之後）利用建立一個包括insertBefore()的函數，將目標節點與插入節點座位參數傳遞進去。function insertAfter(newElement,targetElement){ var  parent =targetElement.parentNode;                  //得到父節點，就是body   假設層次較多，父節點不一定是body if(parent.lastChild==targetElement){                         //推斷目標節點是否為該parent元素的最後一個節點。若是，則運行appendChild()操作 parent.appendChild(newElement,targetElement) }else{ //若目標節點不是parent的最後一個節點。則將目標節點指標下移一位，得到其兄弟節點 parent.insertBefore(newElement,targetElement.nextSibling)    //這樣就能夠在目標節點之後插入了。
 } }  window.onload=function(){var box=document.getElementById(‘box‘);var p =document.createElement(‘p‘);insertAfter(p,box);var text=document.createTextNode(‘在此插入一個文本節點‘);    p.appendChild(text); };

    4、移除節點代碼與例如以下 

window.onload=function(){var box=document.getElementById(‘box‘);alert(‘你將要移除第一個測試DIV‘);box.removeChild(box.childNodes[1])         //移除box的第一個子節點。alert(‘你將要移除整個box‘);box.parentNode.removeChild(box);           //移除整個box。 };

        

     5、替換節點

window.onload=function(){var box=document.getElementById(‘box‘);var p =document.createElement(‘p‘);//僅僅是建立元素節點p 還沒有加入到文檔中去。僅僅是駐留在記憶體中。box.parentNode.insertBefore(p,box);  //先將指標跳到插入位置的父節點，然後在運行插入var text =document.createTextNode(‘測試一下啊！
‘);//建立文本節點textp.appendChild(text);//給p節點加入文本元素alert(‘你將要把第一測試DIV換成“測試一下啊”‘);box.replaceChild(p,box.childNodes[1]);};

     6、複製節點

window.onload=function(){var box=document.getElementById(‘box‘);var clone = box.childNodes[1].cloneNode(true); //擷取第二個子節點，true 表示複製內容     box.appendChild(clone);};

    小結

    以上就是節點操作的部分方法，節點操作的方法不只這些，還有非常多非常多，我們學習DOM，就是學習裡面對象的方法與屬性的使用。希望我們能在今後的項目中經常使用。PS一句。有沒有發現這些方法屬性就死增刪改查操作，先查，在操作，上面的一些操作都是依照這個步驟來的。

        

《JavaScript》——DOM