DOM允許你創(chuàng)建自己的元素和文本節(jié)點(diǎn)，并把它們添加大文檔樹(shù)中。理論上上說(shuō)，你可以從樹(shù)中移除所有的元素，創(chuàng)建新元素，或者重整文檔樹(shù)，從而完全改變頁(yè)面。但是在實(shí)踐中，這個(gè)特性用起來(lái)有些限制。DOM也允許你克隆現(xiàn)有的元素，已便你能方便地復(fù)制文檔的某一部分并在文檔中分發(fā)副本。

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

createElement()和createTextNode()

createElement()和createTextNode()做的事情正如它們的名字所說(shuō)的那樣。最常見(jiàn)的JavaScript DOM方法實(shí)戰(zhàn)-修改文檔樹(shù)中已經(jīng)用過(guò)它們。當(dāng)時(shí)的目的是把新創(chuàng)建的元素添加到文檔樹(shù)里，使它成為某個(gè)元素的***一個(gè)子節(jié)點(diǎn)。

//創(chuàng)建一個(gè)li新元素  
var newChild=document.createElement('li');  
//創(chuàng)建一個(gè)a 新元素  
var newLink=document.createElement('a')  
//創(chuàng)建一個(gè) Text 節(jié)點(diǎn)  
var newText=document.createTextNode('My Wiki');  

newChild指向新創(chuàng)建的<li>元素對(duì)象，newLink指向新創(chuàng)建的<a>元素對(duì)象,而newText指向新創(chuàng)建的文本節(jié)點(diǎn)對(duì)象。這些節(jié)點(diǎn)都還沒(méi)有被插入文檔中。最常見(jiàn)的JavaScript DOM方法實(shí)戰(zhàn)-修改文檔樹(shù)中，用到的appendChild()或insertBefore()將它們附加到文檔樹(shù)中。例如：

var nav=document.getElementById("nav");  
//創(chuàng)建一個(gè)li新元素  
var newChild=document.createElement('li');  
//創(chuàng)建一個(gè)a 新元素  
var newLink=document.createElement('a')  
//創(chuàng)建一個(gè) Text 節(jié)點(diǎn)  
var newText=document.createTextNode('My Wiki');  
//把Text添加到a元素節(jié)點(diǎn)中  
newLink.appendChild(newText);  
//給a元素節(jié)點(diǎn)設(shè)置屬性href和內(nèi)容  
newLink.setAttribute('href',"#");  
//把a(bǔ)元素節(jié)點(diǎn)添加到新的li元素節(jié)點(diǎn)中  
newChild.appendChild(newLink);  
//把新的li元素節(jié)點(diǎn)添加到 ul 元素節(jié)點(diǎn)里  
nav.appendChild(newChild);  

這先將文本節(jié)點(diǎn)附加到<a>中，然后再將包含文本節(jié)點(diǎn)的<a>附加到<li>中，***把包含<a>和文本的<li>附加到<ul>中。此時(shí)我的導(dǎo)航條ul中多了一個(gè)li子節(jié)點(diǎn)。

createTextNode()和HTML實(shí)體

createTextNode()有一個(gè)問(wèn)題：它不能創(chuàng)建類(lèi)似于&euro;（€ 歐元符號(hào)）&yen;（¥ 人民幣符號(hào)） © （&copy; 版權(quán)符號(hào)）&#8220;（“左雙引號(hào)）&#8221;（” 右雙引號(hào)）等，這樣的HTML實(shí)體元素。它會(huì)按字面創(chuàng)建文本，而不是創(chuàng)建你所需要的符號(hào) 。

<script  type="text/javascript"> 
window.onload=function(){  
 var x=document.createTextNode("&copy; Copyrights reserved");  
 document.getElementById("test").appendChild(x);  
}  
</script>  

不過(guò)，我們可以使用innerHTML來(lái)代替：

<script  type="text/javascript"> 
window.onload=function(){   
document.getElementById("test").innerHTML="&copy; 
Copyrights reserved";  
}  
</script>  

關(guān)于innerHTML屬性的用法，我們會(huì)在下一節(jié)中作為專(zhuān)題來(lái)具體的討論。

cloneNode()

cloneNode()方法克隆一個(gè)節(jié)點(diǎn)，即它能對(duì)節(jié)點(diǎn)做一個(gè)***的復(fù)制，使你可以在隨后將其插入到文檔樹(shù)中。導(dǎo)航條HTML代碼：

<div id="menu"> 
    <h1>我的導(dǎo)航條</h1>            
    <ul id="nav"> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#">(X)Html / Css</a></li> 
       <li><a href="#">Ajax / RIA</a></li> 
       <li><a href="#">GoF</a></li> 
       <li><a href="#">JavaScript</a></li> 
       <li><a href="#">JavaWeb</a></li> 
       <li><a href="#">jQuery</a></li> 
       <li><a href="#">MooTools</a></li> 
       <li><a href="#">Python</a></li> 
       <li><a href="#">Resources</a></li> 
    </ul> 
</div>  

測(cè)試cloneNode()

<script  type="text/javascript"> 
window.onload=function(){  
     var nav_list=[];  
  var nav=document.getElementById("nav");  
     navnav_list=nav.getElementsByTagName("li");  
  var x=nav_list[0];  
  var y=x.cloneNode(true);  
  nav.appendChild(y);  
}  
</script> 

要想正確的使用cloneNode(),你必須了解它的一下二個(gè)特征：

1. cloneNode()接受一個(gè)可選值為true或false的參數(shù)。True 表示克隆元素和它的所有子節(jié)點(diǎn)。False表示克隆元素但不包含它的子節(jié)點(diǎn)。通常，我們?cè)趯?shí)踐中用true,我從來(lái)沒(méi)有遇到過(guò)想要克隆一個(gè)節(jié)點(diǎn)但不包含它的子節(jié)點(diǎn)的情形。

2. cloneNode()不會(huì)克隆事件處理程序。這相當(dāng)?shù)淖屓藧阑穑恢肋@個(gè)方法是怎么定義的（原因我也不知道）所以每次你克隆一個(gè)節(jié)點(diǎn)，你不得不在克隆上重新定義事件處理程序。

原文地址：http://cssrainbow.cn/tutorials/javascript/589.html

【編輯推薦】

1. 大話(huà)HTML DOM與XML DOM的區(qū)別與聯(lián)系
2. XML DOM新手入門(mén)指南
3. JavaScript DOM的本質(zhì)及操作方法