我的導(dǎo)航條
            
  
  
  
     
  
  
  
       
HOME
 
  
  
  
       
(X)Html / Css
 
  
  
  
       
Ajax / RIA
 
  
  
  
       
GoF
 
  
  
  
       
JavaScript
 
  
  
  
       
JavaWeb
 
  
  
  
       
jQuery
 
  
  
  
       
MooTools
 
  
  
  
       
Python
 
  
  
  
       
Resources
 
  
  
  
     
  
  
  

appendChild()

appendChild()方法讓你添加一個(gè)節(jié)點(diǎn)并使其成為某個(gè)元素的***一個(gè)子節(jié)點(diǎn)。如果添加的該節(jié)點(diǎn)已經(jīng)存在于文檔中，它會(huì)從當(dāng)前位置移除。該節(jié)點(diǎn)的子節(jié)點(diǎn)保持不變，它們也被一起移動(dòng)到新的位置。

 
 
 

  
  
  
 
  
  
  
window.onload=function(){  
  
  
  
  /*為一個(gè)元素添加子元素*/  
  
  
  
  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);  
  
  
  
   
  
  
  
  /*
從原始位置上被移除，成為ul的***一個(gè)子節(jié)點(diǎn)。它的a 元素節(jié)點(diǎn)和文本節(jié)點(diǎn)HODE也被移了過(guò)來(lái)*/  
  
  
  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一組元素  
  
  
  
  nav.appendChild(nav_list[0]);  
  
  
  
}  
  
  
  
  
 
 
 

創(chuàng)建新DOM元素的通用函數(shù)

 
 
 

  
  
  
 
  
  
  
function create( elem ) {  
  
  
  
    return document.createElementNS ?  
  
  
  
        document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :  
  
  
  
        document.createElement( elem );  
  
  
  
}  
  
  
  
   
  
  
  
  
 
 
 

我們看到結(jié)果：

添加好的子節(jié)點(diǎn)

從原始位置上被移除，成為ul的***一個(gè)子節(jié)點(diǎn)

insertBefore()

insertBefore()方法允許你在其他節(jié)點(diǎn)的前面插入一個(gè)節(jié)點(diǎn)，所以當(dāng)你想要添加一個(gè)子節(jié)點(diǎn)，但又不希望該節(jié)點(diǎn)成為***一個(gè)子節(jié)點(diǎn)的時(shí)候，就可以使用此方法。就像appendChild()方法一樣，如果插入的節(jié)點(diǎn)已經(jīng)存在于文檔之中，它會(huì)被從當(dāng)前位置移除，而且該節(jié)點(diǎn)在被插入之后乃保持它的子節(jié)點(diǎn)結(jié)構(gòu)。

 
 
 

  
  
  
 
  
  
  
window.onload=function(){  
  
  
  
  var nav=document.getElementById("nav");  
  
  
  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一組元素  
  
  
  
  //***個(gè)節(jié)點(diǎn)  
  
  
  
  var x=nav_list[0];  
  
  
  
  //***一個(gè)節(jié)點(diǎn)  
  
  
  
  var y=nav_list[nav_list.length-1]  
  
  
  
  //在x元素對(duì)象之前插入y元素對(duì)象  
  
  
  
  nav.insertBefore(y,x);  
  
  
  
  //在x元素對(duì)象之前插入新生產(chǎn)的newChild元素對(duì)象  
  
  
  
  nav.insertBefore(newChild,x);//newChild元素對(duì)象的創(chuàng)建請(qǐng)參考上面的代碼  
  
  
  
}  
  
  
  
  
 
 
 

 #p#

在其他節(jié)點(diǎn)的前面插入一個(gè)節(jié)點(diǎn)

replaceChild()

replaceChild()方法允許你把一個(gè)節(jié)點(diǎn)替換為另一個(gè)節(jié)點(diǎn)。就像appendChild()和insertBefore()一樣，如果插入的節(jié)點(diǎn)已經(jīng)存在于文檔之中，它會(huì)被從當(dāng)前位置移除，而且該節(jié)點(diǎn)在被插入之后乃保持它的子節(jié)點(diǎn)結(jié)構(gòu)。

 
 
 

  
  
  
 
  
  
  
window.onload=function(){  
  
  
  
  var nav=document.getElementById("nav");  
  
  
  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一組元素  
  
  
  
  //***個(gè)節(jié)點(diǎn)對(duì)象  
  
  
  
  var x=nav_list[0];  
  
  
  
  //x節(jié)點(diǎn)對(duì)象被newChild新節(jié)點(diǎn)對(duì)象替換了  
  
  
  
  nav.replaceChild(newChild,x);  
  
  
  
}  
  
  
  
  
 
 
 

把一個(gè)節(jié)點(diǎn)替換為另一個(gè)節(jié)點(diǎn)

removeChild()

removeChild()方法允許你移除一個(gè)節(jié)點(diǎn)以及它的子節(jié)點(diǎn)們。

 
 
 

  
  
  
 
  
  
  
window.onload=function(){  
  
  
  
  var nav=document.getElementById("nav");  
  
  
  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一組元素  
  
  
  
  //***一個(gè)節(jié)點(diǎn)  
  
  
  
  var y=nav_list[nav_list.length-1]  
  
  
  
  //移除***面的一個(gè)節(jié)點(diǎn)  
  
  
  
  nav.removeChild(y);  
  
  
  
}  
  
  
  
  
 
 
 

你移除一個(gè)節(jié)點(diǎn)以及它的子節(jié)點(diǎn)們

移除所有的子節(jié)點(diǎn)

有的時(shí)候你需要把一個(gè)元素清除干凈；你想在添加新節(jié)點(diǎn)前清除原來(lái)的所有子點(diǎn)。有兩個(gè)簡(jiǎn)單的方法來(lái)做這件事情：

 
 
 

  
  
  
 
  
  
  
 while (x.childNodes[0]){  
  
  
  
  x.removeChild(x.childNodes[0]);  
  
  
  
 }  
  
  
  
   
  
  
  
 /*  
  
  
  
 //我們可以使用firstChild來(lái)代替childNodes[0]  
  
  
  
  while (x.firstChild){  
  
  
  
  x.removeChild(x.firstChild);  
  
  
  
 }  
  
  
  
 * /  
  
  
  
  
 
 
 

這是一個(gè)簡(jiǎn)單的while()循環(huán)，只要元素存在***個(gè)節(jié)點(diǎn)（childNodes[0]），它就移除這個(gè)節(jié)點(diǎn)，接著節(jié)點(diǎn)集合立即更新。所以（原來(lái)的）第二個(gè)節(jié)點(diǎn)成為了***個(gè)節(jié)點(diǎn)，循環(huán)就會(huì)一直重復(fù)，直到X沒(méi)有子節(jié)點(diǎn)為止。另一個(gè)方法就簡(jiǎn)單了

 
 
 

  
  
  
 
  
  
  
x.innerHTML='';  
  
  
  
  
 
 
 

 #p#

輔助函數(shù)

appendChild()和insertBefore()都有2個(gè)參數(shù)，但是我們?cè)趹?yīng)用的時(shí)候，還要注意參數(shù)的先后順序。既然這么麻煩我們還是自己寫(xiě)一些輔助函數(shù)來(lái)代替原有的appendChild()和insertBefore()。在另一個(gè)元素之前插入元素的函數(shù)：

 
 
 

  
  
  
 
  
  
  
//insertBefore()的代替方法  
  
  
  
function before( parent, before, elem ) {  
  
  
  
    // Check to see if no parent node was provided  
  
  
  
 //檢查parent是否傳入  
  
  
  
    if ( elem == null ) {  
  
  
  
        elem = before;  
  
  
  
        before = parent;  
  
  
  
        parent  = before.parentNode;  
  
  
  
    }  
  
  
  
   
  
  
  
    // Get the new array of elements  
  
  
  
 //獲取元素的新數(shù)組  
  
  
  
    var elems = checkElem( elem );  
  
  
  
   
  
  
  
    // Move through the array backwards,  
  
  
  
    // because we’re prepending elements  
  
  
  
 //向后遍歷數(shù)組  
  
  
  
 //因?yàn)槲覀兿蚯安迦朐? 
  
  
  
    for ( var i = elems.length - 1; i >= 0; i-- ) {  
  
  
  
        parent.insertBefore( elems[i], before );  
  
  
  
    }  
  
  
  
}  
  
  
  
  
 
 
 

為另一個(gè)元素添加一個(gè)子元素：

 
 
 

  
  
  
 
  
  
  
//appendChild()的代替方法  
  
  
  
function append( parent, elem ) {  
  
  
  
    // Get the array of elements  
  
  
  
 //獲取元素?cái)?shù)組  
  
  
  
    var elems = checkElem( elem );  
  
  
  
   
  
  
  
    // Append them all to the element  
  
  
  
 //把它們所有都追加到元素中  
  
  
  
    for ( var i = 0; i <= elems.length; i++ ) {  
  
  
  
        parent.appendChild( elems[i] );  
  
  
  
    }  
  
  
  
}  
  
  
  
  
 
 
 

before和append的輔助函數(shù)：

 
 
 

  
  
  
 
  
  
  
function checkElem( elem ) {  
  
  
  
    // If only a string was provided, convert it into a Text Node  
  
  
  
 //如果只提供字符串，那就把它轉(zhuǎn)換為文本節(jié)點(diǎn)  
  
  
  
    return elem && elem.constructor == String ?  
  
  
  
   document.createTextNode( elem ) : elem;  
  
  
  
}  
  
  
  
  
 
 
 

注意：constructor的用法。

有時(shí)你可能需要對(duì)變量進(jìn)行類(lèi)型檢查，或者判斷變量是否已定義。有兩種方法可以使用：typeof函數(shù)與constructor屬性。typeof可以檢查到變量是否有定義，而construct只能檢查已定義變量的類(lèi)型。

移除所有的子節(jié)點(diǎn)的輔助函數(shù)：

 
 
 

  
  
  
  
  
  
  
function empty( elem ) {   
  
  
  
 while (elem.firstChild){  
  
  
  
   remove(elem.firstChild);  
  
  
  
 }  
  
  
  
 /*  
  
  
  
 //我們可以使用firstChild來(lái)代替childNodes[0]  
  
  
  
 while (elem.childNodes[0])  
  
  
  
  remove(elem.childNodes[0]);  
  
  
  
 * /  
  
  
  
}  
  
  
  
   
  
  
  
function remove( elem ) {  
  
  
  
    if ( elem ) elem.parentNode.removeChild( elem );  
  
  
  
}