在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：

1. nodeName : 節(jié)點(diǎn)的名稱

2. nodeValue ：節(jié)點(diǎn)的值

3. nodeType ：節(jié)點(diǎn)的類型

節(jié)點(diǎn)類型：元素 1 ，屬性 2 ，文本 3 ，注釋 8，文檔  9。

 

一、添加和刪除節(jié)點(diǎn)（HTML 元素）

1、創(chuàng)建節(jié)點(diǎn)

1）創(chuàng)建該元素（元素節(jié)點(diǎn)）；

2）向一個(gè)已存在的元素追加該元素。

語(yǔ)法：appendChild(newnode)

 

eg:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 <div id="div1">  2     <p id="p1">這是一個(gè)段落</p>  3     <p id="p2">這是另一個(gè)段落</p>  4 </div>  5   6 <script>  7     var para=document.createElement("p");  8     var node=document.createTextNode("這是新段落。");  9     para.appendChild(node); 10  11     var element=document.getElementById("div1"); 12     element.appendChild(para); 13 </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 document.createElement("標(biāo)簽名");      // 創(chuàng)建元素節(jié)點(diǎn)

 document.createTextNode("文本");      //創(chuàng)建文本節(jié)點(diǎn)

 appendChild();                                           //方法向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)。也可以使用 appendChild() 方法從一個(gè)元素向另一個(gè)元素中移動(dòng)元素。 用法：a.appendChild(b)，把b添加到a內(nèi)。

 

2.添加節(jié)點(diǎn) 

appendChild();                                            //在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。

 語(yǔ)法，eg:同上。

insertBefore();                                             //insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。

語(yǔ)法：insertBefore(newnode,node);

eg:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 <ul id="test">  2     <li>JavaScript</li>  3     <li>HTML</li>  4 </ul>   5    6 <script type="text/javascript">  7       var otest = document.getElementById("test");    8       var newli = document.createElement("li");  9       newli.innerHTML="php"; 10       //otest.insertBefore(newli,otest.lastChild); 11       otest.insertBefore(newli,otest.childNodes[1]); 12 </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)


3.刪除節(jié)點(diǎn)

removeChild()                                             //removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。

語(yǔ)法：nodeObject.removeChild(node)

eg:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 <div id="div1">  2     <p id="p1">這是一個(gè)段落。</p>  3     <p id="p2">這是另一個(gè)段落。</p>  4 </div>  5   6 <script>  7     var parent=document.getElementById("div1");  8     var child=document.getElementById("p1");  9     parent.removeChild(child); 10 </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

DOM 需要清楚需要?jiǎng)h除的元素，以及它的父元素。先找到希望刪除的子元素，然后使用其 parentNode 屬性來(lái)找到父元素。

 

4.替換節(jié)點(diǎn)

replaceChild                                                //把一個(gè)給定父元素里面的一個(gè)子節(jié)點(diǎn)替換為另一個(gè)子節(jié)點(diǎn)。

語(yǔ)法：referencre = element.replaceChild(newChild,oldChild);                //newChild: 必需，用于替換 oldChild的對(duì)象。 oldChild: 必需，被 newChild替換的對(duì)象。

eg:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 <div>  2     <b id="oldnode">JavaScript</b>是一個(gè)很常用的技術(shù)，為網(wǎng)頁(yè)添加動(dòng)態(tài)效果。</div>  3     <a href="javascript:replaceMessage()"> 將加粗改為斜體</a>  4     5     <script type="text/javascript">  6         function replaceMessage(){  7         　　var b=document.getElementById("oldnode");  8         　　var newNode=document.createElement("i");  9         　　newNode.innerHTML=b.innerHTML; 10         　　b.parentNode.replaceChild(newNode,b); 11         }     12   </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

注意：當(dāng) oldnew 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除。 newChild必須先被建立。

 


5.訪問(wèn)子節(jié)點(diǎn)

childNodes                                                  //訪問(wèn)選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性。

語(yǔ)法：elementNode.childNodes            //可用childNodes[i]數(shù)組的形式表示第幾個(gè)子元素

eg:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 <div>  2     javascript    3     <p>javascript</p>  4     <div>jQuery</div>  5     <h5>PHP</h5>  6 </div>  7 <script type="text/javascript">  8      var int=document.getElementsByTagName("div")[0].childNodes;  9      for (var i=0;i<int.length;i++) 10      { 11          document.write("名字："+int[i].nodeName+"<br>"); 12      } 13      document.write("子節(jié)點(diǎn)個(gè)數(shù)："+int.length+"<br>"); 14 </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

6.訪問(wèn)子節(jié)點(diǎn)的第一和最后項(xiàng)

firstChild                   //返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。

語(yǔ)法：node.firstChild                                     //與elementNode.childNodes[0]是同樣的效果。 

lastChild                    //返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。

語(yǔ)法：node.lastChild                                  //與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

eg：

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 <div id="con">  2     <p>javascript</p>  3     <div>jQuery</div>  4     <h5>PHP</h5>  5 </div>  6 <script type="text/javascript">  7     var x=document.getElementById("con");  8     document.write("第一個(gè)子節(jié)點(diǎn)："+x.firstChild.nodeName+"<br>");  9     document.write("最后一個(gè)子節(jié)點(diǎn)："+x.lastChild.nodeName); 10 </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

7.訪問(wèn)父節(jié)點(diǎn)

parentNode                                                 //獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)

語(yǔ)法：elementNode.parentNode

eg:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

1 <div id="text"> 2     <p id="con"> parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</p> 3 </div>  4 <script type="text/javascript"> 5     var mynode= document.getElementById("con"); 6     document.write(mynode.parentNode.nodeName); 7 </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

注意: 父節(jié)點(diǎn)只有一個(gè)，瀏覽器兼容問(wèn)題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個(gè)文本節(jié)點(diǎn)。

 

8.訪問(wèn)兄弟節(jié)點(diǎn)

nextSibling                                                   //可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。

語(yǔ)法：nodeObject.nextSibling

previousSibling                                           //可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。

語(yǔ)法：nodeObject.previousSibling  

eg:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 <ul id="myList">  2     <li id="item1">Coffee</li>  3     <li id="item2">Tea</li>  4 </ul>  5 <p id="demo">點(diǎn)擊按鈕來(lái)獲得首個(gè)項(xiàng)目的下一個(gè)同胞。</p>  6 <button onclick="myFunction()">試一下</button>  7 <script>  8     function myFunction()  9     { 10         var x=document.getElementById("demo");   11         x.innerHTML=document.getElementById("item1").nextSibling.innerHTML; 12     } 13 </script>

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

注意: 如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null。兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號(hào)），而其它瀏覽器不會(huì)忽略。

解決問(wèn)題方法:判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)，跳過(guò)。

http://www.cnblogs.com/Ni-F/p/7086614.html