本篇文章為大家展示了JavaScript中怎么利用DOM修改文檔樹,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名注冊(cè)、網(wǎng)頁空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、開封網(wǎng)站維護(hù)、網(wǎng)站推廣。
修改文檔提供的4個(gè)方法,都是指向它們所作用的節(jié)點(diǎn)的引用。導(dǎo)航條實(shí)例:
<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()方法讓你添加一個(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)到新的位置。
<script type="text/javascript"> 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); /*<li>從原始位置上被移除,成為ul的***一個(gè)子節(jié)點(diǎn)。它的a 元素節(jié)點(diǎn)和文本節(jié)點(diǎn)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é)點(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)。
<script type="text/javascript"> 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)參考上面的代碼 } </script>
在其他節(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)。
<script type="text/javascript"> 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); } </script>
把一個(gè)節(jié)點(diǎn)替換為另一個(gè)節(jié)點(diǎn)
removeChild()
removeChild()方法允許你移除一個(gè)節(jié)點(diǎn)以及它的子節(jié)點(diǎn)們。
<script type="text/javascript"> 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); } </script>
你移除一個(gè)節(jié)點(diǎn)以及它的子節(jié)點(diǎn)們
移除所有的子節(jié)點(diǎn)
有的時(shí)候你需要把一個(gè)元素清除干凈;你想在添加新節(jié)點(diǎn)前清除原來的所有子點(diǎn)。有兩個(gè)簡(jiǎn)單的方法來做這件事情:
<script type="text/javascript"> while (x.childNodes[0]){ x.removeChild(x.childNodes[0]); } /* //我們可以使用firstChild來代替childNodes[0] while (x.firstChild){ x.removeChild(x.firstChild); } * / </script>
這是一個(gè)簡(jiǎn)單的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)就會(huì)一直重復(fù),直到X沒有子節(jié)點(diǎn)為止。另一個(gè)方法就簡(jiǎn)單了
<script type="text/javascript"> x.innerHTML=''; </script>
輔助函數(shù)
appendChild()和insertBefore()都有2個(gè)參數(shù),但是我們?cè)趹?yīng)用的時(shí)候,還要注意參數(shù)的先后順序。既然這么麻煩我們還是自己寫一些輔助函數(shù)來代替原有的appendChild()和insertBefore()。在另一個(gè)元素之前插入元素的函數(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’re prepending elements //向后遍歷數(shù)組 //因?yàn)槲覀兿蚯安迦朐?nbsp; for ( var i = elems.length - 1; i >= 0; i-- ) { parent.insertBefore( elems[i], before ); } } </script>
為另一個(gè)元素添加一個(gè)子元素:
<script type="text/javascript"> //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] ); } } </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é)點(diǎn) return elem && elem.constructor == String ? document.createTextNode( elem ) : elem; } </script>
注意:constructor的用法。
有時(shí)你可能需要對(duì)變量進(jìn)行類型檢查,或者判斷變量是否已定義。有兩種方法可以使用:typeof函數(shù)與constructor屬性。typeof可以檢查到變量是否有定義,而construct只能檢查已定義變量的類型。
移除所有的子節(jié)點(diǎn)的輔助函數(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é)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享標(biāo)題:JavaScript中怎么利用DOM修改文檔樹
文章來源:http://bm7419.com/article36/psdgpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、、服務(wù)器托管、建站公司、微信小程序、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)