上层建筑——DOM元素的特性与属性（dojo/dom-attr）

　　上一篇返本求源中，我们从DOM基础的角度出发，总结了特性与属性的关系。本文中，我们来看看dojo框架是如何处理特性与属性的。dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与dojo/dom-prop模块中。

attr.set（）

　　方法的函数签名为：

require(["dojo/dom-attr"], function(domAttr){

  result = domAttr.set("myNode", "someAttr", "value");

});

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

　　上层建筑——DOM元素的特性与属性（dojo/dom-attr）

　　可以看到上图中使用attr设置innerText只会在html标签中增加innerText这个自定义特性，而无法改变文本，使用textContent却能够达到改变文本的目的。其中缘由就是因为在attr模块建立了forceProps字典，在此字典中的key全部使用prop模块来设置：

        forcePropNames = {

            innerHTML:    ,

            textContent:,

            className:    ,

            htmlFor:    has("ie"),

            value:

        }

　　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 == ){ // inline'd type check

            // the object form of setter: the 2nd argument is a dictionary

            for(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 style

            style.set(node, value);

            return node; // DomNode

        }

        if(forceProp || typeof value == "boolean" || lang.isFunction(value)){

            return prop.set(node, name, value);

        }

        // node's attribute

        node.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 property

            return value;    // Anything

        }

        if(propName == "textContent"){

            return prop.get(node, propName);

        }

        if(propName != "href" && (typeof value == "boolean" || lang.isFunction(value))){

            // node's property

            return value;    // Anything

        }

        // node's attribute

        // we need _hasAttr() here to guard against IE returning a default value

        var 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 = , n; n = ch[i]; i++){

            //Skip comments.

            if(n.nodeType != ){

                if(n.nodeType == ){

                    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);

    };

　　如果您觉得这篇文章对您有帮助，请不吝点击右下方“推荐”，谢谢~

秒客网

上层建筑——DOM元素的特性与属性（dojo/dom-attr）

相关文章