Dom8 js实现排序

getElementsByTagName() / getElementsByClassName()

返回的不是array 是元素集合只有length和[]可以使用

appendChild()

1 先把元素从原有父级上删掉
2 添加到新父级末尾

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script>
        window.onload = function(){
            var btn = document.getElementById("sort");
            var ul = document.getElementsByTagName("ul")[0];
            var lis = ul.getElementsByTagName("li");  // 返回的不是array 是元素集合 只有length和[]可以使用
            console.log(typeof lis); // object  

            //lis.sort(); //Uncaught TypeError: lis.sort is not a functionat window.onload (dom6.html:13)

            var arr = [];
            btn.onclick = function(){
                for(var i = 0; i < lis.length; i++){
                    arr[i] = lis[i];
                }

                arr.sort(function(li1, li2){
                    return parseInt(li1.innerHTML) - parseInt(li2.innerHTML);
                });

                for(var i = 0; i < arr.length; i++){
                    ul.appendChild(arr[i]); //1 先把元素从原有父级上删掉 2 添加到新父级末尾
                }
            }
        }
    </script>
</head>
<body>
<button id="sort">排序</button>
<ul>
    <li>55</li>
    <li>18</li>
    <li>33</li>
    <li>77</li>
    <li>46</li>
    <li>41</li>
    <li>88</li>
    <li>22</li>
    <li>125</li>
</ul>

</body>
</html>

最后编辑于：2017.12.06 03:49:39

Dom8 js实现排序

getElementsByTagName() / getElementsByClassName()

appendChild()

推荐阅读更多精彩内容