JavaScript DOM基礎操作實例

作者：Enough is Enough 2010-09-13 17:12:55

文檔對象模型(Document Object Model)，通常簡稱為DOM，是網站內容與JavaScript互通的接口。自JavaScript成為最常用的語言時JavaScript和DOM通常被視為獨立的實體。DOM接口用于存取、遍歷和控制HTML和XML文檔。

文檔對象模型(Document Object Model)，通常簡稱為DOM，是網站內容與JavaScript互通的接口。自JavaScript成為最常用的語言時JavaScript和DOM通常被視為獨立的實體。DOM接口用于存取、遍歷和控制HTML和XML文檔。下面我們將簡單的介紹一些JavaScript DOM的基本操作實例，包括建立、增加、刪除、克隆、訪問節點等等。

51CTO推薦閱讀：JavaScript DOM的本質及操作方法

1. getElementById(id)

這是通過id來訪問某一元素，最常用的之一，例：

<html> 
         <body> 
         <div id="myid"> 
         test  
         </div> 
         <script language="javascript"> 
         alert(document.getElementById("myid").innerHTML);  
         </script> 
         </body> 
</html>

注意點：如果元素的ID不是***，則會取得***個該ID名稱的元素。

2. getElementsByName(name)

這是通過name來取得某一堆元素（作為數組），看 Element后面有個小s就知道了，ID是HTML文檔中要求***的，name可以不是***，如checkbox、radio等地方會用到多個 input用同一個name來識別是否為同黨。對了，getElementsByName(name)僅用于取得input、radio、 checkbox等元素，如<input name="myradio" type="radio" />。

3. getElementsByTagName(tagname)

看這方法就知道這也是取得某一堆元素（作為數組），是通過TagName也就是標簽名來取得。你可以遍歷這個數組獲得每一個單獨的元素。當一個DOM結構很大時，可以通過它來有效地縮小搜查范圍。

<html>           
         <head> 
         <script> 
         function test() {  
         testall=document.getElementsByTagName("body");  
         testbody=testall.item(0); //獲得所有tagName是body的元素（當然每個頁面只有一個）  
         testall=testbody.getElementsByTagName("p");// 獲得body子元素種的所有P元素  
         testnode=testall.item(1); // 獲得第二個P元素           
         alert(testnode.firstChild.nodeValue); //顯示這個元素的文本         }  
         </script> 
         </head> 
         <body> 
         <p>hi</p> 
         <p>hello</p> 
         <script language="javascript"> 
         test();  
         </script> 
         </body> 
</html>

4. appendChild(node)

向當前的元素（應該叫對象比較恰當）追加節點。

<html> 
         <body> 
         <head> 
         </head> 
         <div id="test"></div> 
         <script type="text/javascript"> 
         var newdiv=document.createElement("div")  
         var newtext=document.createTextNode("A new div")           
         newdiv.appendChild(newtext)  
         document.getElementById("test").appendChild(newdiv)  
         </script> 
         </body> 
</html>

剛才我在***個例子中為了顯示出內容，用了innerHTML，剛才看到文章才得知innerHTMl不屬于DOM。

5. removeChild(childreference)

刪除當前節點的子節點，返回被刪除的節點。這個被刪除的節點可以被插入到別的地方。

<html> 
         <body> 
         <div id="parent"><div id="child">A child</div></div> 
         <script language="javascript"> 
         var childnode=document.getElementById("child")  
         var removednode=document.getElementById("parent").removeChild(childnode)  
         </script> 
         </body> 
</html>

6. cloneNode(deepBoolean)

復制并返回當前節點的復制節點，復制節點是一個孤立節點，它復制了原節點的屬性，在把這個新節點加入到document前，根據需要修改ID屬性確保其ID的***。這個方法支持一個布爾參數，當deepBoolean設置true時，復制當前節點的所有子節點，包括該節點內的文本。

<html> 
         <body> 
         <p id="mynode">test</p> 
         <script language="javascript"> 
         p=document.getElementById("mynode")   
        ppclone = p.cloneNode(true);  
         p.parentNode.appendChild(pclone);  
         </script> 
         </body> 
</html>

7. replaceChild(newChild, oldChild)

把當前節點的一個子節點換成另一個節點。

<html> 
         <body> 
         <div id="mynode2"> 
         <span id="orispan">span</span> 
         </div> 
         <script language="javascript"> 
         var orinode=document.getElementById("orispan");  
         var newnode=document.createElement("p");  
         var text=document.createTextNode("test ppp ");  
         newnode.appendChild(text);  
         document.getElementById("mynode2").replaceChild(newnode, orinode);  
         </script> 
         </body> 
</html>

【編輯推薦】

JavaScript DOM特性與應用詳解
JavaScript DOM修改文檔樹方法實例
JavaScript DOM文檔遍歷實戰

責任編輯：王曉東來源：百度空間

JavaScript DOM