十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

关于NamedNodeMap对象getNamedltem()、removeNamedltem()、setNamedltem()、item()方法使用方法

百恒网络 2016-11-18 653

前面我们通过《结合实例讲解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 如转载请注明出处!


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×