JavaScriptDOM修改文檔樹方法實(shí)例
在我們工作中大多數(shù)DOM腳本的主要任務(wù)就是在DOM文檔中插入，刪除和移動節(jié)點(diǎn)。W3C DOM 提供了4種方法來修改文檔樹。常用的是appendChild()和insertBefore(),而removeChild() 和replaceChild()很少用到。
一般用法
修改文檔提供的4個(gè)方法，都是指向它們所作用的節(jié)點(diǎn)的引用。導(dǎo)航條實(shí)例：
-
-
我的導(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)存在于文檔中，它會從當(dāng)前位置移除。該節(jié)點(diǎn)的子節(jié)點(diǎn)保持不變，它們也被一起移動到新的位置。
-
- 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也被移了過來*/
- 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)存在于文檔之中，它會被從當(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元素對象之前插入y元素對象
- nav.insertBefore(y,x);
- //在x元素對象之前插入新生產(chǎn)的newChild元素對象
- nav.insertBefore(newChild,x);//newChild元素對象的創(chuà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)存在于文檔之中，它會被從當(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];
- //x節(jié)點(diǎn)對象被newChild新節(jié)點(diǎn)對象替換了
- 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)前清除原來的所有子點(diǎn)。有兩個(gè)簡單的方法來做這件事情：
-
- while (x.childNodes[0]){
- x.removeChild(x.childNodes[0]);
- }
-
- /*
- //我們可以使用firstChild來代替childNodes[0]
- while (x.firstChild){
- x.removeChild(x.firstChild);
- }
- * /
-
這是一個(gè)簡單的while()循環(huán)，只要元素存在***個(gè)節(jié)點(diǎn)（childNodes[0]），它就移除這個(gè)節(jié)點(diǎn)，接著節(jié)點(diǎn)集合立即更新。所以（原來的）第二個(gè)節(jié)點(diǎn)成為了***個(gè)節(jié)點(diǎn)，循環(huán)就會一直重復(fù)，直到X沒有子節(jié)點(diǎn)為止。另一個(gè)方法就簡單了
-
- x.innerHTML='';
-
#p#
輔助函數(shù)
appendChild()和insertBefore()都有2個(gè)參數(shù)，但是我們在應(yīng)用的時(shí)候，還要注意參數(shù)的先后順序。既然這么麻煩我們還是自己寫一些輔助函數(shù)來代替原有的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í)你可能需要對變量進(jìn)行類型檢查，或者判斷變量是否已定義。有兩種方法可以使用：typeof函數(shù)與constructor屬性。typeof可以檢查到變量是否有定義，而construct只能檢查已定義變量的類型。
移除所有的子節(jié)點(diǎn)的輔助函數(shù)：
-
- function empty( elem ) {
- while (elem.firstChild){
- remove(elem.firstChild);
- }
- /*
- //我們可以使用firstChild來代替childNodes[0]
- while (elem.childNodes[0])
- remove(elem.childNodes[0]);
- * /
- }
-
- function remove( elem ) {
- if ( elem ) elem.parentNode.removeChild( elem );
- }
-
當(dāng)前標(biāo)題：JavaScriptDOM修改文檔樹方法實(shí)例
瀏覽路徑：
http://uogjgqi.cn/article/coodjip.html
