DOM遍历节点以及属性

时间 2020-09-14

标签 dom 遍历节点以及属性栏目 HTML 繁體版

原文原文链接

1、遍历DOM节点javascript

　　遍历DOM节点经常使用通常用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意，元素节点的子文本节点的nodeValue才是元素节点中文本的内容。html

2、遍历节点属性java

　　Element类型是使用attributes属性的惟一一个DOM节点类型。attributes属性中包含一个NamedNodeMap（节点属性列表）。NamedNodeMap对象拥有下列方法：node

　　　　getNamedItem(name)：返回nodeName属性等于name的节点。函数

　　　　setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引。ui

　　　　removeNamedItem(name)：从列表中移除nodeName属性等于name的节点。spa

　　　　item(pos)：返回位于数字pos位置的节点。code

　　attributes属性中包含一系列节点，每一个节点的nodeName就是特性的名称，而节点的nodeValue特性的值。htm

 
    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">
        
    </script> 对象