利用Array Prototype的方法来实现对dom集合的筛选、indexOf、map等功能

  1. <!DOCTYPE html><html>
    
        <head>
    
            <title>TODO supply a title</title>
    
            <meta charset="UTF-8">
    
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
            <style type="text/css">
    
                div{background-color:red;margin:10px;}
    
            </style>
    
        </head>
    
        <body>
    
            <div class="w50" style="width:50px;height:20px"></div>
    
            <div class="w20" style="width:20px;height:20px"></div>
    
            <div class="w30" id="test" style="width:30px;height:20px"></div>
    
            <div class="w40" style="width:40px;height:20px"></div>
    
            <div class="w10" style="width:10px;height:20px"></div>
    
        </body>
    
    </html>

     

    var arrPro = Array.prototype;
    
    var core_filter = arrPro.filter;
    
    var core_indexOf = arrPro.indexOf;
    
    var core_slide = arrPro.slice;
    
    var core_sort = arrPro.sort;
    
    var core_map  = arrPro.map;
    
    
    
    //当然 为了兼容,应该有toArray方法,对不支持slice.call(nodeList)的浏览器,使用循环
    
    var divArr = core_slide.call(document.getElementsByTagName('div'));
    
    
    
    console.log('筛选出所有宽度小于等于30px的div',core_filter.call(divArr,function(item,index){                
    
        return parseInt(item.style.width,10) <= 30;
    
    }));
    
    console.log('获取#test元素的索引',core_indexOf.call(divArr,document.getElementById('test')));
    
    console.log('按照宽度倒叙排序',core_sort.call(divArr,function(a,b){
    
        return parseInt(a.style.width,10) < parseInt(b.style.width,10);
    
    }));
    
    //将所有div背景色改为黑色
    
    core_map.call(divArr,function(item){
    
        item.style.backgroundColor = 'black';
    
    });

    firebug截图:

  2. 利用Array Prototype的方法来实现对dom集合的筛选、indexOf、map等功能

你可能感兴趣的:(prototype)