前言

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

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

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

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

1、創建節點

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

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

語法：appendChild(newnode)

eg:

<div id="div1">  <p id="p1">這是一個段落</p>  <p id="p2">這是另一個段落</p></div><script>  var para=document.createElement("p");  var node=document.createTextNode("這是新段落。");  para.appendChild(node);  var element=document.getElementById("div1");  element.appendChild(para);</script>

document.createElement("標簽名"); // 創建元素節點

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

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

2.添加節點

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

語法，eg:同上。

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

語法：insertBefore(newnode,node);

eg:

<ul id="test">  <li>JavaScript</li>  <li>HTML</li></ul>  <script type="text/javascript">   var otest = document.getElementById("test");    var newli = document.createElement("li");   newli.innerHTML="php";   //otest.insertBefore(newli,otest.lastChild);   otest.insertBefore(newli,otest.childNodes[1]);</script>

3.刪除節點

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

語法：nodeObject.removeChild(node)

eg:

<div id="div1">  <p id="p1">這是一個段落。</p>  <p id="p2">這是另一個段落。</p></div><script>  var parent=document.getElementById("div1");  var child=document.getElementById("p1");  parent.removeChild(child);</script>

DOM 需要清楚需要刪除的元素，以及它的父元素。先找到希望刪除的子元素，然后使用其 parentNode 屬性來找到父元素。

4.替換節點

replaceChild //把一個給定父元素里面的一個子節點替換為另一個子節點。

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

eg:

<div>  <b id="oldnode">JavaScript</b>是一個很常用的技術，為網頁添加動態效果。</div>  <a href="javascript:replaceMessage()" rel="external nofollow" > 將加粗改為斜體</a>   <script type="text/javascript">    function replaceMessage(){    　　var b=document.getElementById("oldnode");    　　var newNode=document.createElement("i");    　　newNode.innerHTML=b.innerHTML;    　　b.parentNode.replaceChild(newNode,b);    }   </script>