10.Javacript之子節點的獲取

對於如下標籤塊：

<div id = "div1"><em>em文本</em>div<strong>strong文本</strong></div>

一、獲取包括文本的子節點(用的少)

要想獲取div塊中的子節點標籤，JavaScript提供瞭如下方法：

• childNodes 訪問當前節點下所有的子節點

• firstChild 訪問當前節點中的首位子節點

• lastChild 訪問當前節點中的最後一位子節點

• nextSibling 訪問當前節點兄弟節點中的下一個節點

• previousSibling 訪問當前節點兄弟節點中的上一個節點

window.onload = function(){
    var oDiv = document.getElementById("div1");
    alert(oDiv.childNodes.length);	//3
    alert(oDiv.childNodes[0]);	//獲取到<em>em文本</em>
    alert(oDiv.childNodes[1]);	//獲取到div (文本節點)
    alert(oDiv.childNodes[2]);	//獲取到<strong>strong文本</strong>
}

這個例子中，childNodes[0]和childNodes[2]獲取到的是元素節點，childNodes[1]獲取到的是文本節點。

對於各個不同類型的節點，有其相對應的屬性，如下表所示：

	nodeType	nodeName	nodeValue
元素節點	1	標籤名	null
屬性節點	2	屬性名	屬性值
文本節點	3	#text	文本內容

oDiv.childNodes[0].nodeType;	//1
oDiv.childNodes[0].nodeName;	//em
oDiv.childNodes[0].nodeValue;	//null

oDiv.childNodes[1].nodeType;	//3
oDiv.childNodes[1].nodeName;	//#text
oDiv.childNodes[1].nodeValue;	//div

這些方法會將回車、空格、tab都當成一個文本去處理

<div id = "div1">
    <em>em文本</em>
    div
    <strong>strong文本</strong>
</div>

對於這個div塊，oDiv.childNodes.length爲5，因爲首位存在縮進，這就產生了問題，所以有第二種獲取子節點的方法

二、獲取純屬性的子節點

下列這些方法只獲取子節點中的元素節點(會自動排除文本節點)

• children 獲取當前節點下所有的元素節點

• firstElementChild 訪問當前節點中的首位元素子節點

• lastElementChild 訪問當前節點中的最後一位元素子節點

• nextElementSibling 訪問當前節點兄弟節點中的下一個元素節點

• previousElementSibling 訪問當前節點兄弟節點中的上一個元素節點

var length = oDiv.children.length;	//2 只獲取到em和strong
alert(oDiv.firstElementChild.nodeName);	//em
alert(oDiv.lastElementChild.nodeName);	//strong

//如果需要獲取div這個文本節點需要使用(一)中的方法
alert(oDiv.firstElementChild.nextSibling.nodeValue);