제3절 json 데이터 귀속 및dom 리셋 다시 그리기, 비추기

----------------------------------json----------------------------------------------
json          
Json         ，              （     ）
 window    ，       (window.JSON)JSON   ，          ：
1>JSON.parse(xxx)    ie6~8   
2>JSON.stringify(xxx)   ie6~8   

    //1> JSON         JSON   
    var str1 = '{"name":"  ","age":18}';
    JSON.parse(str1);//ie6~8   
    eval("(" + str1 + ")");//       eval  ，           （ie6~8  ）

    //2> JSON        JSON      
    var str2 = {"name": "  ", "age": 18};
JSON.stringify(str2);//ie6~8   

------------------------------      dom  -----------------------------------------------
                              
        for (var i = 0; i < ary.length; i++) {
            var ali1 = document.createElement('li');
            ali1.innerHTML=''+'0'+(i+4)+''+ary[i].name;
            oul.appendChild(ali1);
        }
  ：                    ，          
  ：         li，         ，    dom   ，          ，    


   ：       ：           ，                       ，     ，          ，         
        var str = '';
        for (var i = 0; i < ary.length; i++) {
            str += '
';
            str += '' + '0' + (i + 4) + '' + ary[i].name;
            str += '
';
        }
        oul.innerHTML += str;
           oul.innerHTML = oul.innerHTML(      li          )+str             ，                ，                  
  ：             ul ，           ，        
  ：        ，          ，       



         :    
    var frg = document.createDocumentFragment();//        ，          
    for (var i = 0; i < ary.length; i++) {
        var ali1 = document.createElement('li');
        ali1.innerHTML = '' + '0' + (i + 4) + '' + ary[i].name;
        frg.appendChild(ali1);
    }
    oul.appendChild(frg);
    frg = null;


 js dom    （           ）
 1、  （  ）     html      （                ），               dom  ，            
 2、                   （    、    ），                
 js    ：      
---------------------------------------------      dom  ----------------------------------
    ：    html  ，              
    ： 1    2

css   

html  ：

    
1
    
19
    
10
    
2


js  ：
    var oul = document.getElementsByTagName('ul')[0];
//      
var ali=document.getElementsByTagName('li');
//         
    var arr = utils.listToArray(ali);
    //         
    arr.sort(function (a, b) {
        return parseFloat(a.innerHTML) - parseFloat(b.innerHTML);
    });
    //                  li      
    var frg = document.createDocumentFragment();
    for (var i = 0; i < arr.length; i++) {
        frg.appendChild(arr[i]);
    }
    oul.appendChild(frg);
frg = null;
       8   ？
  ：  dom    ，       li    ， li          oul ，           li        

dom    ：
       js         （    ）          ，    html     ，js        ，               

  :            
        ：   -1*1=-1  -1*-1=1