javaScript系列---【数组对象--价格排序案例】

 <ul id="list" class="list">
        <li><img src="./img/1.jpg" alt=""><span>200</span></li>
        <li><img src="./img/3.jpg" alt=""><span>888</span></li>
        <li><img src="./img/2.jpg" alt=""><span>234</span></li>
        <li><img src="./img/4.jpg" alt=""><span>999</span></li>
        <li><img src="./img/1.jpg" alt=""><span>2000</span></li>
        <li><img src="./img/3.jpg" alt=""><span>888</span></li>
        <li><img src="./img/2.jpg" alt=""><span>88</span></li>
        <li><img src="./img/4.jpg" alt=""><span>178</span></li>
    </ul>
    <button id="btn">点我啊</button>
    <script>
        // DOM回流（重新渲染）
        // DOM回流可以分为重排和重绘
        // 重排：整个页面重新渲染  ->页面结构发生变化,元素位置,大小，display:none才会引起重排
        // 重绘:局部渲染   ->背景颜色，文本颜色，阴影...引发重绘

        // 减少DOM回流（尽量避免重排）


        // 获取元素
        var list = document.getElementById("list"),
            oLis = list.getElementsByTagName("li");
        var btn = document.getElementById("btn");

        console.log(oLis); //获取到的li是一个类数组集合不能够直接使用数组上的方法
        // 将类数组集合转为数组（将这个元素集合中的每一个li取出来放到数组中）
        var arr = [];
        // arr[0] = oLis[0];
        // arr[1] = oLis[1];
        // arr[2] = oLis[2];
        // console.log(arr);

        for (var i = 0; i < oLis.length; i++) {
            arr.push(oLis[i]);
        }

        // 绑定事件
        btn.onclick = function () {
            // 排序
            // sort方法排序是根据返回值的正负进行排序的
            var resArr = arr.sort(function (a, b) {
                // 根据价格比较  获取到价格
                // a,b表示当前数据中具体某一项 就是li这个元素对象
                var aPrice = a.getElementsByTagName("span")[0].innerHTML;
                var bPrice = b.getElementsByTagName("span")[0].innerHTML;
                // console.log(aPrice,bPrice);
                return aPrice - bPrice;
            });
            console.log(resArr);


            // 数组已经排好序了
            // 字符串拼接
            var str = '';

            // 循环的是已经排好序的数组
            // +一旦遇到字符串表示拼接
            // +一旦遇到对象 先将对象转为字符串调用toString();
            // for(var i = 0;i<resArr.length;i++){
            //     // console.log(resArr[i].toString());
            //     str+= resArr[i];
            //     //''+[object HTMLLIElement] =>[object HTMLLIElement][object HTMLLIElement][object HTMLLIElement][object HTMLLIElement][object HTMLLIElement][object HTMLLIElement][object HTMLLIElement][object HTMLLIElement]
            // }

            // console.log(str);

            for (var i = 0; i < resArr.length; i++) {
                // 获取到当前这个li元素对象 
                var curLi = resArr[i]
                // 将当前这个中的内容获取到(从元素当中获取到都是字符串)
                str += '<li>' + resArr[i].innerHTML + '</li>';
            }
            console.log(str);

            // 给ul重新赋值(重新设置内容)
            list.innerHTML = str;
        }
    </script>

 效果图