首页 > 代码库 > DOM遍历节点以及属性
DOM遍历节点以及属性
一、遍历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="http://www.mamicode.com/+node.nodeValue+" nodeType="+node.nodeType+"<br/>";
}
//-->
</script>
DOM遍历节点以及属性