js 通路,插入,替換,建立,删除節點介紹

通路標明元素節點下的所有子節點的清單，傳回的值可以看作是一個數組，他具有length屬性。

文法：

elementNode.childNodes

注意：

如果標明的節點沒有子節點，則該屬性傳回不包含節點的 NodeList。

注意:

1. IE全系列、firefox、chrome、opera、safari相容問題

2. 節點之間的空白符，在firefox、chrome、opera、safari浏覽器是文本節點，是以IE是3，其它浏覽器是7，

通路子節點的第一和最後項

一、firstChild 屬性傳回‘childNodes’數組的第一個子節點。如果標明的節點沒有子節點，則該屬性傳回 NULL。

node.firstChild

說明：與elementNode.childNodes[0]是同樣的效果。

二、 lastChild 屬性傳回‘childNodes’數組的最後一個子節點。如果標明的節點沒有子節點，則該屬性傳回 NULL。

node.lastChild

說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

注意: 我們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它浏覽器不會。我們可以通過檢測節點類型，過濾子節點。

通路父節點parentNode

擷取指定節點的父節點

elementNode.parentNode

注意:父節點隻能有一個。

通路祖節點:

elementNode.parentNode.parentNode

看看下面的代碼:

<div id="text"> 

  <p>

    parentNode     

    <span id="con"> 擷取指點節點的父節點</span>

  </p>

</div>

<script type="text/javascript">

  var mynode= document.getElementById("con");

  document.write(mynode.parentNode.parentNode.nodeName);

</script>

運作結果:

parentNode擷取指點節點的父節點

DIV

注意: 浏覽器相容問題，chrome、firefox等浏覽器标簽之間的空白也算是一個文本節點。

通路兄弟節點

1. nextSibling 屬性可傳回某個節點之後緊跟的節點（處于同一樹層級中）。

nodeObject.nextSibling

說明：如果無此節點，則該屬性傳回 null。

2. previousSibling 屬性可傳回某個節點之前緊跟的節點（處于同一樹層級中）。

nodeObject.previousSibling 

注意: 兩個屬性擷取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符号），而其它浏覽器不會忽略。

插入節點appendChild()

在指定節點的最後一個子節點清單之後添加一個新的子節點。

文法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

插入節點insertBefore()

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

insertBefore(newnode,node);

newnode: 要插入的新節點。

node: 指定此節點前插入節點。

删除節點removeChild()

removeChild() 方法從子節點清單中删除某個節點。如删除成功，此方法可傳回被删除的節點，如失敗，則傳回 NULL。

nodeObject.removeChild(node)

node ：必需，指定需要删除的節點。

替換元素節點replaceChild()

replaceChild 實作子節點(對象)的替換。傳回被替換對象的引用。

node.replaceChild (newnode,oldnew )

參數：

newnode : 必需，用于替換 oldnew 的對象。

oldnew : 必需，被 newnode 替換的對象。

建立元素節點createElement

createElement()方法可建立元素節點。此方法可傳回一個 Element 對象。

document.createElement(tagName)

tagName：字元串值，這個字元串用來指明建立元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯合使用，将元素顯示在頁面中。

我們來建立一個按鈕，代碼如下：

   var body = document.body;

   var input = document.createElement("input"); 

   input.type = "button"; 

   input.value = "建立一個按鈕"; 

   body.appendChild(input); 

 </script> 

效果：在HTML文檔中，建立一個按鈕。

我們也可以使用setAttribute來設定屬性，代碼如下：

<script type="text/javascript"> 

   var body= document.body;            

   var btn = document.createElement("input"); 

   btn.setAttribute("type", "text"); 

   btn.setAttribute("name", "q"); 

   btn.setAttribute("value", "使用setAttribute"); 

   btn.setAttribute(" "javascript:alert('This is a text!');");      

   body.appendChild(btn); 

</script> 

效果：在HTML文檔中，建立一個文本框，使用setAttribute設定屬性值。 當點選這個文本框時，會彈出對話框“This is a text!”。

建立文本節點createTextNode

createTextNode() 方法建立新的文本節點，傳回新建立的 Text 節點。

document.createTextNode(data)

data : 字元串值，可規定此節點的文本。