对于如下标签块：
<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);