访问DOM集合

JS

//【示例1】在下面的例子中，将一个集合coll 复制到数组arr 中，然后比较每次迭代所用的时间。
function toArray(coll) {
    for(var i = 0, a = [], len = coll.length; i < len; i++) {
        a[i] = coll[i];
    }
    return a;
}

var coll = document.getElementsByTagName('div');
var ar = toArray(coll);

//比较慢
function loopCollection() {
    for (var count = 0; count < coll.length; count++) {
    }
}
// 比较快
function loopCopiedArray() {
    for (var count = 0; count < arr.length; count++) {
    }
}

//【示例2】当每次迭代过程访问集合的length 属性时，将会导致集合器更新，在所有浏览器上都会产生明显的性能损失。优化的办法很简单，只要将集合的length属性缓存到一个变量中，然后在循环判断条件中使用这个变量。
function loopCacheLengthCollection() {
    var coll = document.getElementsByTagName('div'),
    len = coll.length;
    for (var count = 0; count < len; count++) {
    }
}

//【示例3】在下面示例中，循环访问每个元素的3个属性。最慢的方法是每次都要访问全局变量document，优化后的代码缓存了一个指向集合的引用，最快的代码将集合的当前元素存入局部变量。
//较慢方法
function collectionGlobal() {
    var coll = document.getElementsByTagName('div'), len = coll.length, name = '';
    for(var count = 0; count < len; count++) {
        name = document.getElementsByTagName('div')[count].nodeName;
        name = document.getElementsByTagName('div')[count].nodeType;
        name = document.getElementsByTagName('div')[count].tagName;
    }
    return name;
};
// 较快方法
function collectionLocal() {
    var coll = document.getElementsByTagName('div'), len = coll.length, name = '';
    for(var count = 0; count < len; count++) {
        name = coll[count].nodeName;
        name = coll[count].nodeType;
        name = coll[count].tagName;
    }
    return name;
};
// 最快方法
function collectionNodesLocal() {
    var coll = document.getElementsByTagName('div'), len = coll.length, name = '', el = null;
    for(var count = 0; count < len; count++) {
        el = coll[count];
        name = el.nodeName;
        name = el.nodeType;
        name = el.tagName;
    }
    return name;
};