前面我們通過《結合實例講解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: //m.51yjwy.com 如轉載請注明出處!