var dvs = document.getElementsByTagName("div"),
    ps  = document.getElementsByTagName("p"),
    i = 0, j = 0, 
    dvLen = dvs.length,
    pLen = ps.length;

for(; i < dvLen; i++) {
    dvs[i].style.border = "1px solid red";
}
for(; j < pLen; j++) {
    ps[j].style.border = "1px solid red";
}

1 代码冗余
2 没有实现复用
3 错误率高
4 效率低
5 性能不好

var getElmsByTag = function(tagName) {
    return document.getElementsByTagName(tagName);
};

var dvs = getElmsByTag("div");
var ps = getElmsByTag("p");

// for 循环遍历两次来设置样式

// 1 将 for 循环封装成 each 函数
var each = function(arr) {
    for(var i = 0; i < arr.length; i++) {
        arr[i].style.border = "1px solid red";
    }
};

// 2 修改 each 函数的功能 实现修改任何样式
var each = function(arr, style, value) {
    for(var i = 0; i < arr.length; i++) {
        arr[i].style[ style ] = value;
    }
};

var arr = [1, 3, 5, 7, 10, 9, 8];
例如：求和、求最大值、查找某值的索引号 等等
写出以上练习，并找出其中相同点（抽象的能力）

var each = function(arr, fn) {
    var i = 0,
        len = arr.length;
    for(;i < len; i++) {
        fn(i, arr[i]);
    }
};

var each = function(arr, fn) {
    var i = 0,
        len = arr.length;
    for(; i < len; i++) {
        if(fn(i, arr[i]) === false) {
            break;
        }
    }
};

var each = function(arr, fn) {
    var i = 0,
        len = arr.length;
    for(;i < len; i++) {
        if(fn.call(arr[i], i, arr[i]) === false) {
            break;
        }
    }
};

var getElmsByTag = function(tagName, results) {
    results = results || []; // 设置默认值

    results.push.apply(results, document.getElementsByTagName(tagName));
    return results;
};

each(getElmsByTag("div", getElmsByTag("p")), function() {
    this.style.background = "green";
});

1 在原来的函数中直接修改
2 写一个新的函数，如果要通过标签名获取，则直接调用 getElmsByTag

推荐使用第二种方式
原因：获取元素的函数可能有多个，例如：通过id获取的函数/通过标签名获取/通过类名获取

var getElmById = function(id, results) {
    results = results || [];
    results.push( document.getElementById(id) );

    return results;
};

var getElmsByClsName = function(clsName, results) {
    results = results || [];
    results.push.apply(results, document.getElementsByClassName(clsName));

    return results;
};

var get = function(selector, results) {
    results = results || [];

    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w-]+)|(\*))$/,
        m = rquickExpr.exec(selector);

    if(m) {
        if(m[1]) {
            results = getElmById(m[1], results);
        } else if(m[2]) {
            results = getElmsByClsName(m[2], results);
        } else {
            results = getElmsByTag(m[3] || m[4], results);
        }
    }

    return results;
};

1 方法存在兼容性，IE8 及以下的浏览器不支持此方法
2 如何判断浏览器不支持该方法
3 如何实现该方法

1 能力只需要检测一次即可
2 能力检测当心函数重写问题

1 提供一个：support 对象
2 对象中提供与被检测方法同名的属性，其值为布尔值
3 在js被加载的时候，就进行能力判断且只判断一次，并将判断的结果进行存储
4 凡是要用到能力检测的地方直接使用该对象

var support = {};
support.getElementsByClassName = !!document.getElementsByClassName;

var support = {};

support.getElementsByClassName = function() {
    var isExist = false,
        tempDiv = null, tempClsName;
    isExist = !!document.getElementsByClassName;

    if(!isExist || typeof document.getElementsByTagName !== "funtion") {
        return false;
    }

    tempDiv = document.createElement("div");
    tempClsName = "itcast_" + Math.random();
    tempDiv.className = tempClsName;

    document.body.appendChild(tempDiv)

    isExist = document.getElementsByClassName(tempClsName)[0] === tempDiv;

    document.body.removeChild(tempDiv);

    return isExist;
}();

support.getElementsByClassName = function() {
    // function getElementsByClassName() { [native code] }
    var rnative = /^[^{]+\{\s*\[native \w/;
    return rnative.test(document.getElementsByClassName);
}();

1 通过 标签名 获取到所有元素
2 遍历集合，通过判断元素的 className 属性，看下是否符合要求
3 符合要求的添加到 数组 中
4 将数组返回

var getElmsByClsName = function (className, results) {
    results = results || [];

    var allNodes, i, len, cNode;

    if(document.getElementsByClassName) {
        results.push.apply(results, 
            document.getElementsByClassName(className));
    } else {
        allNodes = document.getElementsByTagName("*");

        for(i = 0, len = allNodes.length; i < len; i++) {
            cNode = allNodes[i];
            if((" " + cNode.className + " ")
                .indexOf(" " + className + " ") > -1) {
                results.push(cNode);
            }
        }
    }

    return results;
};