方法的函數(shù)簽名為： require(["dojo/dom-attr"], function(domAttr){result = domAttr.set("myNode", "someAttr", "value"); });

　　“someAttr”代表特性名稱，但有時(shí)候也可以是一些特殊的屬性名，如：‘textContent’：

　　

　　可以看到上圖中使用attr設(shè)置innerText只會(huì)在html標(biāo)簽中增加innerText這個(gè)自定義特性，而無法改變文本，使用textContent卻能夠達(dá)到改變文本的目的。其中緣由就是因?yàn)樵赼ttr模塊建立了forceProps字典，在此字典中的key全部使用prop模塊來設(shè)置：

forcePropNames = {innerHTML: 1,textContent:1,className: 1,htmlFor: has("ie"),value: 1}

　　set（）方法中主要處理以下幾件事：

• “someAttr”除了可以是字符串外，還可以是key-value對(duì)象，所以對(duì)于key-value對(duì)象我們首先要進(jìn)行參數(shù)分解。
• 如果someAttr等于style，就交給dojo/dom-style模塊來處理
• 上篇文章中我們說過，特性值只能是字符串，所以對(duì)于函數(shù)，默認(rèn)是作為事件綁定到元素上，這部分交給dojo/dom-prop來處理；另外對(duì)于disabled、checked等無狀態(tài)的屬性，在通過屬性設(shè)置時(shí)，只能傳遞布爾值，所以這部分也交給prop來處理
• 剩下的交給原生api，setAttribute來處理，這個(gè)方法會(huì)自動(dòng)調(diào)用value的toString方法

exports.set = function setAttr(/*DOMNode|String*/ node, /*String|Object*/ name, /*String?*/ value){node = dom.byId(node);if(arguments.length == 2){ // inline'd type check// the object form of setter: the 2nd argument is a dictionaryfor(var x in name){exports.set(node, x, name[x]);}return node; // DomNode }var lc = name.toLowerCase(),propName = prop.names[lc] || name,forceProp = forcePropNames[propName];if(propName == "style" && typeof value != "string"){ // inline'd type check// special case: setting a stylestyle.set(node, value);return node; // DomNode }if(forceProp || typeof value == "boolean" || lang.isFunction(value)){return prop.set(node, name, value);}// node's attributenode.setAttribute(attrNames[lc] || name, value);return node; // DomNode};

?

attr.get()

　　方法的函數(shù)簽名為：

// Dojo 1.7+ (AMD) require(["dojo/dom-attr"], function(domAttr){result = domAttr.get("myNode", "someAttr"); });

　　為了解釋方便，我們要先看一下get方法的源碼：

exports.get = function getAttr(/*DOMNode|String*/ node, /*String*/ name){node = dom.byId(node);var lc = name.toLowerCase(),propName = prop.names[lc] || name,forceProp = forcePropNames[propName],value = node[propName]; // should we access this attribute via a property or via getAttribute()?if(forceProp && typeof value != "undefined"){// node's propertyreturn value; // Anything }if(propName == "textContent"){return prop.get(node, propName);}if(propName != "href" && (typeof value == "boolean" || lang.isFunction(value))){// node's propertyreturn value; // Anything }// node's attribute// we need _hasAttr() here to guard against IE returning a default valuevar attrName = attrNames[lc] || name;return _hasAttr(node, attrName) ? node.getAttribute(attrName) : null; // Anything};

先得到的是三個(gè)變量：propName、forceProp、value，

如果attrName屬于forceProps集合，直接返回DOM節(jié)點(diǎn)的屬性

textContent明顯位于forceProps中，為什么還要單獨(dú)拿出來做判斷？因?yàn)橛械牡桶姹镜臑g覽器不支持textContent，我們需要利用深度優(yōu)先算法，利用文本的節(jié)點(diǎn)的nodeValue由父到子依次拼接文本，這一點(diǎn)jQuery與dojo的思路都是一致的：

dojo：function getText(/*DOMNode*/node){var text = "", ch = node.childNodes;for(var i = 0, n; n = ch[i]; i++){//Skip comments.if(n.nodeType != 8){if(n.nodeType == 1){text += getText(n);}else{text += n.nodeValue;}}}return text;}

jQuery：

set方法中提到過，對(duì)于布爾跟函數(shù)，交給prop來設(shè)置，那么取值時(shí)當(dāng)然也要從prop中來取；至于為什么要單獨(dú)拿出href，在“返本求源”中已經(jīng)說過，通過屬性得到的href屬性跟getAttribute方法得到的值并不一定相同，尤其是非英文字符：

由prop模塊該做的都做完了，所以這里判斷node中是否存在該特性時(shí)，無需理會(huì)forceProps字典；如果存在則調(diào)用getAttribute方法。

?

attr.has

　　既然可以使用attr來set這些屬性，那在attr.has方法中，位于此字典中屬性當(dāng)然也要返回true，所以attr.has（node, attrName）方法主要判斷兩個(gè)方面：

• attrName是否是forceProps中的key
• attrName是否是一個(gè)特性節(jié)點(diǎn)。特性節(jié)點(diǎn)為與元素的attributes屬性中，可以通過：attributes[attrName] && attributes[attrName].specified 來判斷

exports.has = function hasAttr(/*DOMNode|String*/ node, /*String*/ name){var lc = name.toLowerCase();return forcePropNames[prop.names[lc] || name] || _hasAttr(dom.byId(node), attrNames[lc] || name); // Boolean }; function _hasAttr(node, name){var attr = node.getAttributeNode && node.getAttributeNode(name);return !!attr && attr.specified; // Boolean}

　　

attr.remove

　　這個(gè)方法比較簡單，直接調(diào)用了removeAttribute方法

exports.remove = function removeAttr(/*DOMNode|String*/ node, /*String*/ name){// summary:// Removes an attribute from an HTML element.// node: DOMNode|String// id or reference to the element to remove the attribute from// name: String// the name of the attribute to remove dom.byId(node).removeAttribute(attrNames[name.toLowerCase()] || name);};

總結(jié)

以上是生活随笔為你收集整理的dojo中的dojo/dom-attr的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。