一、遍歷DOM節點
遍歷DOM節點常用一般用節點的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue屬性。在獲取節點nodeValue時要注意，元素節點的子文本節點的nodeValue才是元素節點中文本的內容。
二、遍歷節點屬性
Element類型是使用attributes屬性的唯一一個DOM節點類型。attributes屬性中包含一個NamedNodeMap（節點屬性列表）。NamedNodeMap對象擁有下列方法：
getNamedItem(name)：返回nodeName屬性等於name的節點。
setNamedItem(node)：向列表中添加節點，以節點的nodeName屬性為索引。
removeNamedItem(name)：從列表中移除nodeName屬性等於name的節點。
item(pos)：返回位於數字pos位置的節點。
attributes屬性中包含一系列節點，每個節點的nodeName就是特性的名稱，而節點的nodeValue特性的值。
var
id = element.attributes.getNamedItem(
'id'
).nodeValue;
//下面代碼在IE中會列出節點所有屬性，而在Firefox,Chrome中只列出顯示聲明的屬性
var
attrMap = element.attributes;
for
(
var
i = 0; i < attrMap.length; i++){
console.log(attrMap[i].nodeName +
' : '
+ attrMap[i].nodeValue);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dom遍歷</title>
</head>
<body>
<div id="frm">
用戶名:<input type="text" name="username" id="uname"/>
</div>
</body>
</html>
<script type="text/javascript">
<!--
//當窗體加載完畢后觸發此函數
window.onload = function(){
//document 獲取根元素
var root = document.documentElement;
//遍歷所喲的節點
traverseNodes(root);
document.write(msg);
}
function traverseNodes(node){
//判斷是否是元素節點
if(node.nodeType == 1){
display(node);
//判斷是否有屬性節點
/* for(var i=0;i<node.attributes.length;i++){
//得到屬性節點
var attr = node.attributes.item(i);
//判斷該節點是否存在
if(attr.specified){
//如果存在 顯示輸出
display(attr);
}
} */
//判斷該元素節點是否有子節點
if(node.hasChildNodes){
//得到所有的子節點
var sonnodes = node.childNodes;
//遍歷所喲的子節點
for (var i = 0; i < sonnodes.length; i++) {
//得到具體的某個子節點
var sonnode = sonnodes.item(i);
//遞歸遍歷
traverseNodes(sonnode);
}
}
}else{
display(node);
}
}
var msg = "";
var num=0;
function display(node){
msg+=(++num)+" nodeName="+node.nodeName+" nodeValue="+node.nodeValue+" nodeType="+node.nodeType+"<br/>";
}
//-->
</script>