JSON

分析图31

表格排序

步骤

  • [x] 1、获取元素

    1
    2
       var ul=document.getElementById("ul");
    var list=document.getElementsByTagName("li");

  • [x] 2、元素集合类数组转换为数组

    1
    var arr=utils.listToArray(list);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
        //应用此命名空间的公用方法
        <script type="text/javascript">
    	var utils={
                listToArray:function(likeArray){
    	                var arr=[];
    	                try{
    	                    arr=[].slice.call(likeArray);
    	                }catch(e){
    	                    for(var i=0;i<likeArray.length;i++){
    	                        arr[arr.length]=likeArray[i];
    	                    }
    	                }
    	                return arr;
               		}
               	}
    </script>

  • [x] 3、数组排序(按照每个li中内容排序)

    1
    2
       console.log(arr);//(arr存储的是li标签)[<li>​11​</li>​, <li>​23​</li>​, <li>​43​</li>​, <li>​32​</li>​, <li>​13​</li>​]
    arr.sort(function(a,b){return parseFloat(a.innerHTML)-parseFloat(b.innerHTML);});//此时数组中排好了

  • [x] 4、按照arr中存储的最新顺序，依次把对应的li添加到页面中

    1
    2
    3
    4
    5
    6
       var frg=document.createDocumentFragment();
    for(var i=0;i<arr.length;i++){
    	frg.appendChild(arr[i]);
    }
    ul.appendChild(frg);
    frg=null;

上面问题：为啥不是10个li而是5个li？

DOM映射

DOM映射机制：页面的标签和js中获取的元素或集合是紧紧绑定在一起的，页面中的HTML结构改变了，js中不需重新获取，集合里的内容也会跟着自动改变；

  • [x] 2、元素集合类数组转换为数组 
    1
    2
    3
    4
    5
    6
    7
       var ul=document.getElementById("ul");
    var list=document.getElementsByTagName("li");
    console.log(list.length);//->5
        
    var oli=document.createElement("li");
    ul.appendChild(oli);
    console.log(list.length);//->6 没重新获取，但是list这个集合长度和内容会自动跟着发生改变

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	
	</style>
</head>
<body>
<ul id="ul">
	<li>11</li>
	<li>23</li>
	<li>43</li>
	<li>32</li>
	<li>13</li>
</ul>
<script type="text/javascript">
	var utils={
            listToArray:function(likeArray){
	                var arr=[];
	                try{
	                    arr=[].slice.call(likeArray);
	                }catch(e){
	                    for(var i=0;i<likeArray.length;i++){
	                        arr[arr.length]=likeArray[i];
	                    }
	                }
	                return arr;
           		}
           	}
</script>
<script type="text/javascript">
	var ul=document.getElementById("ul");
	var list=document.getElementsByTagName("li");
	//1、先把元素集合类数组转换为数组
	var arr=utils.listToArray(list);
	//2、数组排序(按照每个li中内容排序)
	// console.log(arr);//(arr存储的是li标签)[<li>​11​</li>​, <li>​23​</li>​, <li>​43​</li>​, <li>​32​</li>​, <li>​13​</li>​]
	arr.sort(function(a,b){return parseFloat(a.innerHTML)-parseFloat(b.innerHTML);});//此时数组中排好了
	//3、按照arr中存储的最新顺序，依次把对应的li添加到页面中
	var frg=document.createDocumentFragment();
	for(var i=0;i<arr.length;i++){
		frg.appendChild(arr[i]);
	}
	ul.appendChild(frg);
	frg=null;
</script>
</body>
</html>