<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、先把元素集合類數(shù)組轉(zhuǎn)換為數(shù)組：

var ary=utils.listToArray(oLis);`
**2、給數(shù)組進(jìn)行排序：按照每一個li中的內(nèi)容大小進(jìn)行排序**
ary.sort(function(a,b){
      return parseFloat(a.innerHTML)-parseFloat(b.innerHTML);  //ary中存的是li（如<li>98</li>)，所以用innerHTML獲取其內(nèi)容
});

3、按照ary中存儲的最新順序依次的把對應(yīng)的li添加到頁面中：

var frg=document.createDocumentFragment();
 for(var i=0;i<ary.length;i++){
      frg.appendChild(ary[i]);
 }
 oUl.appendChild(frg);
 frg=null;  //代碼優(yōu)化：手動釋放堆內(nèi)存

——————————————————————————————————————————————
附加：類數(shù)組轉(zhuǎn)換為數(shù)組函數(shù)函數(shù)（全兼容）：

var utils={
      listToArray:function(likeArray){
         var ary=[ ];
         try{              
              ary=Array.prototype.slice.call(likeArray);  
//call把slice中的this換位likeArray(類數(shù)組)，（即相當(dāng)于把類數(shù)組轉(zhuǎn)換為數(shù)組，可以調(diào)用數(shù)組的屬性和方法了）。call中只有l(wèi)ikeArray作為this這個參數(shù)，沒有其他參數(shù)，說明執(zhí)行slice沒有參數(shù)（即執(zhí)行slice();)，相當(dāng)于克隆一個一模一樣的數(shù)組
         }
         catch(e){
            for(var i=0;i<likeArray.length;i++){
                 ary[ary.length]=likeArray[i];
            }
         }
         return ary;
     }
}
//其中try-catch，try若報錯，則執(zhí)行catch中的代碼。catch一般都會帶個參數(shù)，一般為e。以上listToArray()函數(shù)就兼容所有瀏覽器

DOM映射機制：

頁面中的標(biāo)簽和JS中獲取到的元素對象（元素集合）是緊緊綁定在一起的，頁面中的HTML結(jié)構(gòu)改變了，JS中不需要重新獲取，集合里面的內(nèi)容也會跟著自動改變。