javascript DOM元素節點操作簡單介紹

螞蟻小編發表於2017-04-14
JavaScript

關於DOM元素的操作在javascript中那是再頻繁不過的事情了，既然如此常用，那麼對此有良好的掌握是必須的，當然熟練的程式設計師可能是沒有任何問題，本章節主要介紹一下javascript操作DOM節點的基礎知識，希望能夠對初學者有所幫助。

一.常用的節點:

1.元素節點。

2.屬性節點。

3.文字節點。

二.各節點介紹:

為了更好的介紹各節點的特點，先看一段程式碼:

[HTML] 純文字檢視 複製程式碼
<body>
<input type="text" id="userName" name="userName" value="螞蟻部落" /> 
<div id="mydiv">螞蟻部落一</div> 
<div name="parent_test"> 
  <div id="box">
    <span>螞蟻部落二</span>
    <span>螞蟻部落三</span>
    <span>螞蟻部落四</span>
  </div> 
</div> 
<div id="copy">
  <span>螞蟻部落五</span>
  <span>螞蟻部落六</span>
  <span>螞蟻部落七</span>
</div>
<div id="m"></div>
</body>

下面就通過javascript操作以上程式碼。

1.元素節點:

元素節點的nodeType屬性值為1，nodeName的屬性值為當前標籤的名稱，，而nodeValue的值始終為null。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("userName");
theNode.nodeType;//等於1。
theNode.nodeName;//等於INPUT。
theNode.nodeValue;//等於null

2.屬性節點:

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("userName").getAttributeNode("name");
theNode.nodeType;//等於2。
theNode.nodeName;//等於name。
theNode.nodeValue;//等於userName。

獲取屬性節點使用getAttributeNode()函式。

3.文字節點:

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("mydiv").firstChild;
theNode.nodeType;//等於3。
theNode.nodeName;//等於#text。
theNode.nodeValue;//等於螞蟻部落一

firstChild可以獲取父元素的第一個子節點，這裡就是為本節點。

4.獲取子節點並進行操作:

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("box").firstChild;
theNode.nodeType;//3

nodeType的返回值是3，當然也不是絕對的，在標準瀏覽器中是3，但是在IE9以下瀏覽器中是1，也就是說是一個元素節點。之所以這樣是因為在表準瀏覽器中，空格和回車也會被當做節點，在IE9以下瀏覽器中不會。lastChild屬性可以獲得父元素的最後一個子節點，和firstChild具有同樣的特點。

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("box").childNodes;
theNode[1].innerHTML;//螞蟻部落二

childNodes可以獲得父元素的所有子節點，此屬性和firstChild屬性類似，在標註瀏覽器中會將空格或者回車當做節點，在IE9以下不會。如果想忽略空格或者回車這些節點，可以使用children屬性替代，儘管它不屬於W3C的標準屬性。

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("box").childNodes;
theNode[0].nextSibling.innerHTML;//螞蟻部落二

nextSibling屬性可以獲得當前節點的下一個同輩節點。同樣在標註瀏覽器中會將空格或者回車當做節點，在IE9以下不會。

previousSibling屬性和nextSibling屬性類似，它用作獲得當前節點的上一個同輩節點，同樣在標註瀏覽器中會將空格或者回車當做節點，在IE9以下不會。

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("box");
var newNode=document.createElement("span");
newNode.innerHTML="新螞蟻部落";
theNode.appendChild(newNode);

使用createElement()函式可以建立一個新的元素節點，然後再使用appendChild()將新建立的元素節點新增到theNode的尾部。

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("box");
var newNode=document.createElement("span");
newNode.innerHTML="新螞蟻部落";
theNode.appendChild(newNode);
theNode.removeChild(newNode);

以上程式碼可以使用removeChild將新附加的節點刪除。

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("box");
var newNode=document.createElement("span");
newNode.innerHTML="新螞蟻部落";
theNode.replaceChild(newNode,theNode.childNodes[1]);

以上程式碼可以用新的節點替換theNode節點下的第二個子節點。

[JavaScript] 純文字檢視 複製程式碼
var theNode=document.getElementById("box");
var newNode=document.createElement("span");
newNode.innerHTML="新螞蟻部落";
theNode.insertBefore(newNode,theNode.childNodes[1]);

以上程式碼可以在指定的節點前面插入一個新的節點。

關於節點的操作簡單的總結如上，當然內容還有很多，這裡就不多說了，希望上面的內容能夠給需要的朋友帶來一定的幫助。

相關文章