DOM 操作是学习 Javascript 很重点的一块。YUI 提供了丰富的 DOM 操作接口，它们定义在 %BUILD%/dom/dom.js 中（封装成 YAHOO.util.Dom）。由于 DOM 操作比较重要，我计划将其分成几个 Part 分析。

先绕开头部很多的 if...else （其实就是定义 toCamel 与 getStyle 两个函数） - 由于浏览器的实现不统一，才造成如此麻烦的情况，回头可以聊聊这些代码。

下面我们在 YAHOO.util.Dom 类中看看有哪些宝藏。目前 思想已经逐步的分裂 ，我看见个函数说个函数。

// 基本上可以认为是 document.getElementById 的翻版
get: function(el) {
    // 如果已经是 HTMLElement ，那么就直接返回
    if (el && (el.nodeType || el.item)) {
        return el;
    }
    
    // 如果是字符串，那么就返回有这个 ID 的 Element
    if (YAHOO.lang.isString(el) || !el) {
        return document.getElementById(el);
    }
    
    // 看起来是个数组，循环调用自身，获取 Eelement
    if (el.length !== undefined) {
        var c = [];
        for (var i = 0, len = el.length; i < len; ++i) {
            c[c.length] = Y.Dom.get(el[i]);
        }
        
        return c;
    }

    return el;
},

这段代码写得非常的精妙。坦白的说，上述代码中的循环体，如果不加思索的话，恐怕就会写成

for (var i = 0, len = el.length; i < len; ++i) {
    c[c.length] = document.getElementById(el[i]);
}

虽然也能正常工作，但是前面的判断就失去了意义。

继续走马观花，现在看看 getElementsByClassName 的内部机制。有关 getElementsByClassName 的详细调用，可以参看 YUI 文档 。

getElementsByClassName: function(className, tag, root, apply) {
    // 获取 tag 标签，默认为所有（「*」）
    tag = tag || '*';
    // 指定跟节点名
    root = (root) ? Y.Dom.get(root) : null || document; 
    if (!root) {
        return [];
    }
    
    // 初始化节点信息
    var nodes = [],
        elements = root.getElementsByTagName(tag),
        re = getClassRegEx(className);

    // 滤掉不符合规则的节点
    for (var i = 0, len = elements.length; i < len; ++i) {
        if ( re.test(elements[i].className) ) {
            // 你一定很奇怪为什么用 nodes.length 而不是用 i
            // 仔细考虑下 :^)
            nodes[nodes.length] = elements[i];
            // 执行回调函数
            if (apply) {
                apply.call(elements[i], elements[i]);
            }
        }
    }
    
    return nodes;
},

教科书式的 DOM 节点获取和过滤，初始化数据以及操作数据都显得非常的严谨而且正规，YUI 的代码让我有几分的「安全感」。类似的，再来一个 getElementsBy 函数 ，相应代码如下

getElementsBy: function(method, tag, root, apply) {
    // 与上述函数相同，略
    tag = tag || '*';
    root = (root) ? Y.Dom.get(root) : null || document; 

    if (!root) {
        return [];
    }

    var nodes = [],
        elements = root.getElementsByTagName(tag);
    
    for (var i = 0, len = elements.length; i < len; ++i) {
        // 根据自定义函数返回值判断节点的属性
        if ( method(elements[i]) ) {
            nodes[nodes.length] = elements[i];
            if (apply) {
                apply(elements[i]);
            }
        }
    }
    
    return nodes;
},

OK，今天就先到这里。

在 YUI 框架的 %BULID%/yahoo/yahoo.js 中，包含了一系列的变量类型检测方法，它们被分装成 YAHOO.lang.is* 。其中，这些函数的大部分封装都是 typeof 操作符的封装，我个人比较敢兴趣的事 isArray 与 isValue 的两个函数。

YAHOO.lang = YAHOO.lang || {
    isArray: function(o) { 
        if (o) {
           var l = YAHOO.lang;
           // 如果该对象有 length 这个属性，同时支持 splice 方法，
           // 那么就认为它为数组。
           return l.isNumber(o.length) && l.isFunction(o.splice);
        }
        return false;
    },

    isBoolean: function(o) {
        return typeof o === 'boolean';
    },

    isFunction: function(o) {
        return typeof o === 'function';
    },
        
    isNull: function(o) {
        return o === null;
    },
        
    isNumber: function(o) {
        return typeof o === 'number' && isFinite(o);
    },
      
    isObject: function(o) {
        return (o && (typeof o === 'object' || 
                            YAHOO.lang.isFunction(o))) || false;
    },
        
    isString: function(o) {
        return typeof o === 'string';
    },
        
    isUndefined: function(o) {
        return typeof o === 'undefined';
    },
    
    //...

    isValue: function(o) {
        // Infinity fails
        // return (o || o === false || o === 0 || o === '');
        var l = YAHOO.lang;
        return (l.isObject(o) || l.isString(o) || 
                           l.isNumber(o) || l.isBoolean(o));
    }
};

…… 复制粘贴分割线 ……

据悉 ，在 YUI 2.2.0 版本以前，YAHOO.lang.isArray 是这样写的。

isArray: function(obj) { 
    // safari 有 bug，只好处理字符串
    if (obj && obj.constructor && 
                 obj.constructor.toString().indexOf('Array') > -1) {  
        return true;  
    } else {
        return YAHOO.lang.isObject(obj) && obj.constructor == Array;  
    }  
},

而这样的判断数组类型是有缺陷的，比如下面的代码

function myArray() {
   this.name = 'name';  
}  
var o2 = new myArray();  
alert(YAHOO.util.isArray(o2));  // 弹出true  
// 因为 obj.constructor.toString() 中包含 myArray 字样，所以返回true  
  
function Obj() {  
    this.name = 'name';  
}  
var o = new Obj();  
o.constructor = Array;
alert(YAHOO.util.isArray(o));  // 弹出 true  
// 因为在 JavaScript 里，constructor 也是属性
// 可以动态指定，所以返回 true

因此，在 YUI 的后续版本，YAHOO.lang.isArray 被修改成了目前的这个样子

isArray: function(o) { 
    if (o) {
       var l = YAHOO.lang;
       // 如果该对象有 length 这个属性，同时支持 splice 方法，
       // 那么就认为它为数组。
       return l.isNumber(o.length) && l.isFunction(o.splice);
    }
    return false;
},

新的实现用了另外的思路：如果该对象有 length 这个属性，同时支持 splice 方法，那么就认为它为数组。当然，它依然有漏洞，我们仍然可以创建一个对象，使其拥有 length 属性和 splice 方法。但我觉得现在的实现更为合理，因为一来可能性不大，二来避免了诡异的浏览器的 BUG 。

再看 YUI 2.3.0 后引入的 YAHOO.lang.isValue，其实就是判断参数是否是一个有意义的值，只要参数不是 null/undefined/NaN，那么都返回 true。（注意这和一般的判断真假的不同就是， 0/false/''(空字符串) 这些都算是有效的值），所以 YAHOO.lang.isValue 非常适合用来判断表单域的值是否为有效值。

由于开发的需要，不得不在各浏览器下测试页面的表现情况。于是安装了 云烈 提供的某个软件（据说可以多个 IE 共存）以后，桌面就变成了这个样子。

改编下 以前说的一些话 ，如有雷同纯属正常。

「你甭管什么浏览器，Internet Explorer、Firefox、Opera 还是 Safari，都给装上去。
这个还不够，光 Internet Explorer 你就要装六个版本的。你还别嫌少，装少了你都不
好意思和人家打招呼。这叫什么？专业！任务栏里看见一排各版本的 Internet Explorer
倍儿有面子！

我们搞开发的起码怎么的也得通过 Internet Explorer 测试吧？那是最基本的，你还别嫌
烦。什么Firefox 啊、Opera 啊、Safari 啊，你都要测试一遍，既然能同时通过
Internet Explorer 两个版本（6.0 与 7.0）的测试，就不在乎再多几个浏览器。

这叫什么，叫 Web 标准！」