DOM遍历节点以及属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="+node.nodeValue+" nodeType="+node.nodeType+"<br/>";  
        }  
        //-->  
    </script> 

以上是关于DOM遍历节点以及属性的主要内容,如果未能解决你的问题,请参考以下文章

DOM探索之基础详解——学习笔记

详解SimpleXML添加_修改_删除_遍历XML节点属性

jQuery 常用选择器和方法以及遍历(超详细)

Js操作-DOM操作

js学习--DOM操作详解大全 前奏(认识DOM)

第3章 DOM基本概念以及基本属性和方法