JavaScript中怎么利用DOM修改文檔樹

本篇文章為大家展示了JavaScript中怎么利用DOM修改文檔樹，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

修改文檔提供的4個方法，都是指向它們所作用的節(jié)點的引用。導(dǎo)航條實例：

<div id="menu">     <h2>我的導(dǎo)航條</h2>                <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>

appendChild()

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

<script type="text/javascript"> window.onload=function(){    /*為一個元素添加子元素*/    var nav=document.getElementById("nav");    //創(chuàng)建一個li新元素    var newChild=document.createElement('li');    //創(chuàng)建一個a 新元素    var newLink=document.createElement('a')    //創(chuàng)建一個 Text 節(jié)點    var newText=document.createTextNode('My Wiki');    //把Text添加到a元素節(jié)點中    newLink.appendChild(newText);    //給a元素節(jié)點設(shè)置屬性href和內(nèi)容    newLink.setAttribute('href',"#");    //把a元素節(jié)點添加到新的li元素節(jié)點中    newChild.appendChild(newLink);    //把新的li元素節(jié)點添加到 ul 元素節(jié)點里    nav.appendChild(newChild);       /*<li>從原始位置上被移除，成為ul的***一個子節(jié)點。它的a 元素節(jié)點和文本節(jié)點HODE也被移了過來*/    navnav_list=nav.getElementsByTagName("li");//返回相同的一組元素    nav.appendChild(nav_list[0]);  }  </script>

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

<script type="text/javascript"> function create( elem ) {      return document.createElementNS ?          document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :          document.createElement( elem );  }     </script>

我們看到結(jié)果：

添加好的子節(jié)點

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

insertBefore()

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

<script type="text/javascript"> window.onload=function(){    var nav=document.getElementById("nav");    navnav_list=nav.getElementsByTagName("li");//返回相同的一組元素    //***個節(jié)點    var x=nav_list[0];    //***一個節(jié)點    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)建請參考上面的代碼  }  </script>

在其他節(jié)點的前面插入一個節(jié)點

replaceChild()

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

<script type="text/javascript"> window.onload=function(){    var nav=document.getElementById("nav");    navnav_list=nav.getElementsByTagName("li");//返回相同的一組元素    //***個節(jié)點對象    var x=nav_list[0];    //x節(jié)點對象被newChild新節(jié)點對象替換了    nav.replaceChild(newChild,x);  }  </script>

把一個節(jié)點替換為另一個節(jié)點

removeChild()

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

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

你移除一個節(jié)點以及它的子節(jié)點們

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

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

<script type="text/javascript">  while (x.childNodes[0]){    x.removeChild(x.childNodes[0]);   }      /*   //我們可以使用firstChild來代替childNodes[0]    while (x.firstChild){    x.removeChild(x.firstChild);   }   * /  </script>

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

<script type="text/javascript"> x.innerHTML='';  </script>

輔助函數(shù)

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

<script type="text/javascript"> //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&rsquo;re prepending elements   //向后遍歷數(shù)組   //因為我們向前插入元素      for ( var i = elems.length - 1; i >= 0; i-- ) {          parent.insertBefore( elems[i], before );      }  }  </script>

為另一個元素添加一個子元素：

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

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

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

注意：constructor的用法。

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

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

 <script type="text/javascript"> 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 );  }  </script>

上述內(nèi)容就是JavaScript中怎么利用DOM修改文檔樹，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。