js便簽筆記（4）——簡單說說getAttributeNode()和setAttributeNode()

1.前言：

前兩天寫過一片《分析dom元素的特性Attribute和屬性Property》，分析了特性和屬性的區(qū)別。那篇文章卻忽略了一個主要知識點——getAttributeNode()和setAttributeNode()

近來看《jQuery技術(shù)內(nèi)幕》，今天正好看到j(luò)Query.attr()那一部分，忽然想起來這個方法。就此簡單說一說。

2.從jQuery說起：

jQuery指出，在IE6、7下，瀏覽器的getAttribute()和setAttribute()不能正常獲取和設(shè)置Attribute的值。jQuery做的測試類似于：

div1.className = 'aaa';
alert(div1.getAttribute("className") === 'aaa');

IE6、7下或出現(xiàn)以上情況，即通過正常的 getAttribute("class")獲取不到值。

那么在這種情況下，jQuery給出的解決方案是通過getAttributeNode("class").nodeValue獲取，即可成功。相關(guān)代碼如下：

 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.如何應(yīng)用：

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直接創(chuàng)建：

<div id="div1" class="divClass"></div>

var attr = document.createAttribute("myAttr");
attr.nodeValue = 'wang';
div1.setAttributeNode(attr);

運行以上代碼，div1會加上一個“myAttr”的自定義特性:

4.最后：

加上對getAttributeNode()和setAttributeNode()的分析，對于html特性和dom屬性的分析就更全面了。

各位看官，如有發(fā)現(xiàn)問題，請盡管提出！在此謝過！

posted @ 2014-04-01 22:01 王福朋閱讀(10475) 評論(6) 收藏舉報

刷新頁面返回頂部

王福朋 - 博客園

js便簽筆記（4）——簡單說說getAttributeNode()和setAttributeNode()

1.前言：

2.從jQuery說起：

3.如何應(yīng)用：

4.最后：

公告