<ul id="ul1">
<li>98</li>
<li>99</li>
<li>96</li>
<li>95</li>
<li>90</li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById("ul1");
var oLis=oUl.getElementsByTagName("li");
步骤:
1、先把元素集合类数组转换为数组:
var ary=utils.listToArray(oLis);`
**2、给数组进行排序:按照每一个li中的内容大小进行排序**
ary.sort(function(a,b){
return parseFloat(a.innerHTML)-parseFloat(b.innerHTML); //ary中存的是li(如<li>98</li>),所以用innerHTML获取其内容
});
3、按照ary中存储的最新顺序依次的把对应的li添加到页面中:
var frg=document.createDocumentFragment();
for(var i=0;i<ary.length;i++){
frg.appendChild(ary[i]);
}
oUl.appendChild(frg);
frg=null; //代码优化:手动释放堆内存
——————————————————————————————————————————————
附加:类数组转换为数组函数函数(全兼容):
var utils={
listToArray:function(likeArray){
var ary=[ ];
try{
ary=Array.prototype.slice.call(likeArray);
//call把slice中的this换位likeArray(类数组),(即相当于把类数组转换为数组,可以调用数组的属性和方法了)。call中只有likeArray作为this这个参数,没有其他参数,说明执行slice没有参数(即执行slice();),相当于克隆一个一模一样的数组
}
catch(e){
for(var i=0;i<likeArray.length;i++){
ary[ary.length]=likeArray[i];
}
}
return ary;
}
}
//其中try-catch,try若报错,则执行catch中的代码。catch一般都会带个参数,一般为e。以上listToArray()函数就兼容所有浏览器
DOM映射机制:
页面中的标签和JS中获取到的元素对象(元素集合)是紧紧绑定在一起的,页面中的HTML结构改变了,JS中不需要重新获取,集合里面的内容也会跟着自动改变。