WEB前端题集解答(2)

      下面的题目来自淘宝,稍微做了下改动


下面是一个网友积分列表,请用Javascirpt将列表积分从高到低重新排序,

<ul id="score">
 	<li>小王<em>70</em></li>
	<li>小李<em>68</em></li>
	<li>小张<em>80</em></li>
	<li>小四<em>50</em></li>
	<li>小五<em>40</em></li>
	<li>小六<em>30</em></li>
 </ul>


解决方案:首先要获得积分元素集合,即em元素集合; 获得之后要对集合进行排序,单对元素集合进行排序可要苦死,可以将其转化为数组,利用数组的特性进行排序;最后将排序好的数组元素重新接到ul上。


代码如下:

function NodeListToArray(list){
    var elems = [];
    try {
        elems = Array.prototype.slice.call(list, 0);
     } 
     catch (e) {/*For IE*/
        for (var i = 0, len = list.length; i < len; ++i) {
             elems.push(list[i]);
         }
     }
     return elems;
}
            
window.onload = function(){
      /*比较函数*/
      var scoreCompare = function(elem1, elem2){
           return parseInt(elem2.firstChild.nodeValue) - parseInt(elem1.firstChild.nodeValue);
       };
                
       var list = document.getElementById('score'), 
			ems = list.getElementsByTagName('em'), 
			elems = null;
                
        /*获得em元素数组*/
        elems = NodeListToArray(ems);
        /*对em元素数组排序*/
        elems.sort(scoreCompare);
        /*按顺序连接到ul节点之后,这里注意下appendChild的妙处,若节点已经存在于文档上,
         *则appendChild会将节点从原来的位置删除,接在新的位置上,而不用把原来节点复制,移除,再添加*/
        for (var i = 0, len = elems.length; i < len; ++i) {
           list.appendChild(elems[i].parentNode);
         }
};


以下是个人认为的考点和家分点:


考点1:能否利用JS内置对象的特性提高性能;这里用到了Array对象

考点2:appendChild函数的特点;若节点已经存在于文档上,则appendChild会将节点从原来的位置删除,接在新的位置上

应注意的细节:数字字符串的比较,'2'是比'12'大的,所以不应该简单的比较字符串,应该将其转化为数字再进行比较

加分项:利用call调用原生内置方法,知道IE下DOM元素与其他浏览器的实现不同(IE下是COM实现的,所以内置的数组方法没法对其使用,这个是书上看的,我只是搬来说说,当然结论就是,IE下对NodeList调用数组的内置方法会出错)。



  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值