DOM属性(childNodes, nodeType, nodeValue, nodeName, firstChild, lastChild)

 

childNodes 属性

 element.childNodes 返回一个数组，这个数组包含给定元素节点的全体子元素

var element = document.getElementsByTagName("ul");
var oElement = element[0].childNodes;
for(var i = 0; i < oElement.length; i++){
  alert(typeof oElement[i]);
}

 

---

 

nodeType 属性

node.nodeType 返回一个数值

nodeType 属性总共有12种可取值，但其中仅有3种具有使用价值：元素节点、属性节点、文本节点的 nodeType 的属性值分别是 1、2、3。

元素节点的 nodeType 属性值是 1。

属性节点的 nodeType 属性值是 2。

文本节点的 nodeType 属性值是 3。

var element = document.getElementsByTagName("ul");
var oElement = element[0].childNodes;
for(var i = 0; i < oElement.length; i++){
  alert(oElement[i].nodeType);
}

 

---

 

nodeValue 属性

node.nodeValue 检索或设置节点的值

var text = document.getElementsByTagName("p");
alert(text[0].childNodes[0].nodeValue);
text[0].childNodes[0].nodeValue = "OK-value";
alert(text[0].childNodes[0].nodeValue);

 

---

 

nodeName 属性

node.nodeName 返回一个大写字符串（节点名）

var name = document.getElementsByTagName("p");
alert(name[0].nodeName);

 

---

 

firstChild 属性

node.firstChild 直接访问childNodes[]数组的第一个元素

var parent = document.getElementsByTagName("p");
var child = parent[0].firstChild;
alert(child.nodeValue);

 

---

 

lastChild 属性

 node.firstChild 直接访问childNodes[]数组的最后一个元素

var parent = document.getElementsByTagName("p");
var child = parent[0].lastChild;
alert(child.nodeValue);

  

---

 

Examples:

 1 <p>Hello World!<span>OK!!!</span></p>
 2 <script type="text/javascript">
 3 <!--
 4 var element = document.getElementsByTagName("p");
 5 var childs = element[0].childNodes;
 6 for(var i = 0; i < childs.length; i++){
 7     alert(childs[i].nodeType);
 8     i != 1 ? alert(childs[i].nodeValue) : alert(childs[i].childNodes[0].nodeValue);
 9 }
10 
11 var first = element[0].firstChild;
12 alert(first.nodeType);
13 alert(first.nodeValue);
14 alert(first.nodeName);
15 
16 var last = element[0].lastChild;
17 alert(last.nodeType);
18 alert(last.nodeValue);
19 alert(last.nodeName);
20 -->
21 </script>