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

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

　　

　　可以看到上圖中使用attr設置innerText只會在html標簽中增加innerText這個自定義特性，而無法改變文本，使用textContent卻能夠達到改變文本的目的。其中緣由就是因為在attr模塊建立了forceProps字典，在此字典中的key全部使用prop模塊來設置：

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

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

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

　　方法的函數簽名為：

// 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};

先得到的是三個變量：propName、forceProp、value，

如果attrName屬于forceProps集合，直接返回DOM節點的屬性

textContent明顯位于forceProps中，為什么還要單獨拿出來做判斷？因為有的低版本的瀏覽器不支持textContent，我們需要利用深度優先算法，利用文本的節點的nodeValue由父到子依次拼接文本，這一點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方法中提到過，對于布爾跟函數，交給prop來設置，那么取值時當然也要從prop中來取；至于為什么要單獨拿出href，在“返本求源”中已經說過，通過屬性得到的href屬性跟getAttribute方法得到的值并不一定相同，尤其是非英文字符：

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

?

attr.has

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

• attrName是否是forceProps中的key
• attrName是否是一個特性節點。特性節點為與元素的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

　　這個方法比較簡單，直接調用了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);};

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。