下面的题目来自淘宝,稍微做了下改动
下面是一个网友积分列表,请用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调用数组的内置方法会出错)。