1.前言:
前兩天寫過一片《分析dom元素的特性Attribute和屬性Property》,分析了特性和屬性的區別。那篇文章卻忽略了一個主要知識點——getAttributeNode()和setAttributeNode()
近來看《jQuery技術內幕》,今天正好看到jQuery.attr()那一部分,忽然想起來這個方法。就此簡單說一說。
2.從jQuery說起:
jQuery指出,在IE6、7下,瀏覽器的getAttribute()和setAttribute()不能正常獲取和設定Attribute的值。jQuery做的測試類似於:
div1.className = 'aaa';
alert(div1.getAttribute("className") === 'aaa');
IE6、7下或出現以上情況,即通過正常的 getAttribute("class")獲取不到值。
那麼在這種情況下,jQuery給出的解決方案是通過getAttributeNode("class").nodeValue獲取,即可成功。相關程式碼如下:
1 if ( !getSetAttribute ) { 2 3 //省略... 4 5 // Use this for any attribute in IE6/7 6 // This fixes almost every IE6/7 issue 7 nodeHook = jQuery.valHooks.button = { 8 get: function( elem, name ) { 9 var ret; 10 ret = elem.getAttributeNode( name ); 11 return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ? 12 ret.nodeValue : 13 undefined; 14 }, 15 set: function( elem, value, name ) { 16 // Set the existing or create a new attribute node 17 var ret = elem.getAttributeNode( name ); 18 if ( !ret ) { 19 ret = document.createAttribute( name ); 20 elem.setAttributeNode( ret ); 21 } 22 return ( ret.nodeValue = value + "" ); 23 } 24 }; 25 26 //省略... 27 }
3.如何應用:
3.1 getAttributeNode:
getAttributeNode()用法比較簡單,它將返回一個Attr型別的物件,其nodeType === 2
<div id="div1" class="divClass"></div> var className = div1.getAttributeNode("class").nodeValue; //'divClass' var title = div1.getAttributeNode("title"); // null var type = div1.getAttributeNode("class").nodeType; // 2
3.2 setAttributeNode:
setAttributeNode()將接收一個Attr型別的物件,Attr型別的物件可用document直接建立:
<div id="div1" class="divClass"></div> var attr = document.createAttribute("myAttr"); attr.nodeValue = 'wang'; div1.setAttributeNode(attr);
執行以上程式碼,div1會加上一個“myAttr”的自定義特性:
4.最後:
加上對getAttributeNode()和setAttributeNode()的分析,對於html特性和dom屬性的分析就更全面了。
各位看官,如有發現問題,請儘管提出!在此謝過!