JavaScript HTML DOM 元素操做（節點）

 

 

在文檔對象模型 (DOM) 中，每一個節點都是一個對象。DOM 節點有三個重要的屬性 ：

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

節點類型：元素 1 ，屬性 2 ，文本 3 ，註釋 8，文檔  9。

 

1、添加和刪除節點（HTML 元素）

一、建立節點

1）建立該元素（元素節點）；

2）向一個已存在的元素追加該元素。

語法：appendChild(newnode)

 

eg:

 1 <div id="div1">
 2     <p id="p1">這是一個段落</p>
 3     <p id="p2">這是另外一個段落</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>

 document.createElement("標籤名");      // 建立元素節點

 document.createTextNode("文本");      //建立文本節點

 appendChild();                                           //方法向節點添加最後一個子節點。也可使用 appendChild() 方法從一個元素向另外一個元素中移動元素。 用法：a.appendChild(b)，把b添加到a內。

 

2.添加節點 

appendChild();                                            //在指定節點的最後一個子節點列表以後添加一個新的子節點。

 語法，eg:同上。

insertBefore();                                             //insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法：insertBefore(newnode,node);

eg:

 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> 

3.刪除節點

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

語法：nodeObject.removeChild(node)

eg:

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

DOM 須要清楚須要刪除的元素，以及它的父元素。先找到但願刪除的子元素，而後使用其 parentNode 屬性來找到父元素。

4.替換節點

replaceChild                                                //把一個給定父元素裏面的一個子節點替換爲另外一個子節點。

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

eg:

 1 <div>
 2     <b id="oldnode">JavaScript</b>是一個很經常使用的技術，爲網頁添加動態效果。</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>

 

注意：當 oldnew 被替換時，全部與之相關的屬性內容都將被移除。 newChild必須先被創建。

 

5.訪問子節點

childNodes                                                  //訪問選定元素節點下的全部子節點的列表，返回的值能夠看做是一個數組，他具備length屬性。

語法：elementNode.childNodes            //可用childNodes[i]數組的形式表示第幾個子元素

eg:

 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("子節點個數："+int.length+"<br>");
14 </script>

 

6.訪問子節點的第一和最後項

firstChild                   //返回‘childNodes’數組的第一個子節點。若是選定的節點沒有子節點，則該屬性返回 NULL。

語法：node.firstChild                                     //與elementNode.childNodes[0]是一樣的效果。 

lastChild                    //返回‘childNodes’數組的第一個子節點。若是選定的節點沒有子節點，則該屬性返回 NULL。

語法：node.lastChild                                  //與elementNode.childNodes[elementNode.childNodes.length-1]是一樣的效果。

eg：

 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("第一個子節點："+x.firstChild.nodeName+"<br>");
 9     document.write("最後一個子節點："+x.lastChild.nodeName);
10 </script>

 

7.訪問父節點

parentNode                                                 //獲取指定節點的父節點

語法：elementNode.parentNode

eg:

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

注意: 父節點只有一個，瀏覽器兼容問題，chrome、firefox等瀏覽器標籤之間的空白也算是一個文本節點。

 

8.訪問兄弟節點

nextSibling                                                   //可返回某個節點以後緊跟的節點（處於同一樹層級中）。

語法：nodeObject.nextSibling

previousSibling                                           //可返回某個節點以前緊跟的節點（處於同一樹層級中）。

語法：nodeObject.previousSibling  

eg:

 1 <ul id="myList">
 2     <li id="item1">Coffee</li>
 3     <li id="item2">Tea</li>
 4 </ul>
 5 <p id="demo">點擊按鈕來得到首個項目的下一個同胞。</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>            

注意: 若是無此節點，則該屬性返回 null。兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:判斷節點nodeType是否爲1, 如是爲元素節點，跳過。