前面我们通过《结合实例讲解getAttribute()、setAttribute()和removeAttribute()区别及使用方法》文章介绍过DOM中对元素特性操作的三个方法getAttribute()、setAttribute()和removeAttribute的使用方法，对于真正做开发的技术人员来讲，也是我们经常要用到的，接下来由南昌网站制作公司百恒网络开发工程师结合实例介绍NamedNodeMap对象拥有的方法如何使用，Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个“动态"的集合。元素的每一个特性都由一个Attr节

点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法。

◎getNamedltem (name)：返回nodeName属性等于name的节点;

◎removeNamedltem (name)：从列表中移除nodeName属性等于name的节点;

◎setNamedltem (node)：向列表中添加节点，以节点的nodeName属性为索引;

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

attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue 就是特性的值。要取得元素的id特性，可以使用以下代码：

var id=element.attributes.getNamedltem("id").nodeValue;

以下是使用方括号语法通过特性名称访问节点的简写方式：

var id=element.attributes["id"].nodeValue;

也可以使用这种语法来设置特性的值，即先取得特性节点，然后再将其nodeValue设置为新值， 如下所示：

element.attributes["id"].nodeValue= "someOtherld";

调用removeNamedltem()方法与在元素上调用removeAttribute()方法的效果相同——直接删除具有给定名称的特性。下面的例子展示了两个方法间唯一的区别，即removeNamedltem()返回表

示被删除特性的Attr节点：

var oldAttr=element.attributes.removeNamedltem(“id");

最后，setNamedltem()是一个很不常用的方法，通过这个方法可以为元素添加一个新特性，为此需要为它传人一个特性节点，如下所示：

element. attributes.setNamedlt em (newAttr);

一般来说，由于前面介绍的attributes的方法不够方便，因此开发人员更多的会使用 getAttribute()、 removeAttribute()和setAttribute()方法。

不过，如果想要遍历元素的特性，attributes属性倒是可以派上用场。在需要将DOM结构序 列化为XML或HTML字符串时，多数都会涉及遍历元素特性。以下代码展示了如何迭代元素的每一

个特性，然后将它们构造成name="value" name="value"这样的字符串格式：

function outputAttributes( element){

var pairs=new Array();

for (var i=0, len=element .attributes. length; i var attrName=element.attributes[i].nodeName ;

var attrValue=element. attributes[i].nodeValue;

pairs. push (attrName+"=""+attrValue+""");

}

return pairs.join("");

这个函数使用了一个数组来保存名值对，最后再以空格为分隔符将它们拼接起来(这是序列化长 字符串时的一种常用技巧)。通过attributes.length属性，for循环会遍历每个特性，将特性的名

称和值输出为字符串。关于以上代码的运行结果，以下是两点必要的说明。

◎针对attributes对象中的特性，不同浏览器返回的顺序不同。这些特性在XML或HTML代码中出现的先后顺序，不一定与它们出现在attributes对象中的顺序一致。

◎IE7及更早的版本会返回HTML元素中所有可能的特性，包括没有指定的特性。换句话说，返 回100多个特性的情况会很常见。

针对IE7及更早版本中存在的问题，可以对上面的函数加以改进，让它只返回指定的特性。每个特性节点都有一个名为specified的属性，这个属性的值如果为true，则意味着要么是在HTML中

指定了相应特性，要么是通过setAttribute()方法设置了该特性。在IE中，所有未设置过的特性的该属性值都为false，而在其他浏览器中根本不会为这类特性生成对应的特性节点(因此，在这些浏

览器中，任何特性节点的specified值始终为true)，改进后的代码如下所示：

function outputAttributes(element){

var pairs=new Array();

for(var i=0, len=element.attributes.length;i var attrName=element.attributes[i].nodeName;

var attrValue=element.attributes[i].nodeValue;

}

return pairs.join("");

}

这个经过改进的函数可以确保即使在IE7及更早的版本中，也会只返回指定的特性。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络 http: //www.jxbh.cn 如转载请注明出处!