DOM映射、JSON、ajax基础知识

1.DOM映射：

页面中的元素通过DOM方法来获取回来的元素，这个集合仍然和页面中的元素存在这种一一对应的关系就是DOM映射。并且即使这个元素暂时不存在，这个变量lis集合仍然会随着页面内li的增加而增加，减少而减少

var list=document.getElementById('list');
var lis=list.getElementsByTagName('li');
//通过dom方法获取的集合
console.log(lis); //  HTMLCollection  类数组集合

2.DOM回流

页面中元素位置的改变或者增加/删除，都会引起DOM回流；(比重绘要更费性能)

3.DOM重绘

DOM重绘(不会影响其他人)，一般就是元素样式的改变会引起重绘；

4.把已经排好序的这些li重新添加到元素中->看是添加到末尾还是原有的元素互相交换位置？

经过验证，就是把原有元素重新调换位置;
使用appendChid(动态添加)的方式不会影响元素的任何属性，曾经绑定过的事件现在还存在

//方法1,循环把已经排好序的这些li重新添加到元素中->看是添加到末尾还是原有的元素互相交换位置？
for(var i=0;i<lisAry.length;i++){
    list.appendChild(lisAry[i]); //依次塞入页面，会造成多次DOM回流，非常的耗性能
}


//方法2,使用文档碎片，减少dom回流次数
//创建一个文档碎片，作为dom的临时容器
var frg=document.createDocumentFragment(); 
for(var i=0;i<lisAry.length;i++){
    frg.appendChild(lisAry[i]); //暂时先把这些li添加到文档碎片中
}
list.appendChild(frg);//把包含所有li的文档碎片添加到list列表中；只造成了一次dom回流
frg=null;//frg就没有用了；js没办法释放内存，就写这句表明不再用这块内存了（写不写都行）

5.如果在页面中原有的基础上添加4个li(两种方法)

//方法1，动态创建的方法(引起了4次DOM回流，可以用文档碎片减少dom回流)
 for(var i=5;i<=8;i++){
     var li=document.createElement('li');
     li.innerHTML=i;
     list.appendChild(li);
 }

//方法2，innerHTML的方式(滑动事件全都没了，不过只引起了一次页面回流);
 // 会破坏原有元素的属性，如果元素之前没有属性最好用这种方法
  var str='';
  for(var i=9;i<=10;i++){
     str+='<li>'+i+'</li>';
  }
  list.innerHTML=list.innerHTML+str;//重新赋值了，所以原有的事件属性全都没了  // list.innerHTML+=str;

6.总结（动态创建和innerHTML）

动态创建的方式并不会影响原有元素的任何属性，但是操作起来不方便，还有可能引起多次DOM回流；
innerHTML的方式操作起来比较简便，但是会破坏原有元素的属性（原有的元素不存在了）不存在任何元素时使用比较合适；
使用innerHTML方式会比较多，不过不再用拼接字符串的方式，改用‘模板引擎’

7.JSON

JSON就是一种数据格式，在跨平台中兼容性比较好；
JSON格式：属性名字用双引号包含，属性值如果是字符串也用双引号包含；
JSON.parse: 把一个JSON格式的字符串，转化为一个JSON格式的对象（不兼容时可以用eval）
JSON.stringify:把一个JSON格式的对象，转化为一个JSON格式的字符串
JSON在IE7及以下不兼容

var obj={ //js对象
  name:'zf',
  age:8
};
var jsonObj={ //JSON格式对象
  "name":"zf",
  "age":8
};
console.log(window.JSON);//JSON对象

var res=JSON.stringify(jsonObj);
console.log(res);  //{"name":"zf","age":8}
var res1=JSON.parse(res);
console.log(res1); //Object {name: "zf", age: 8}

JSON.parse()=>eval //处理兼容性问题

function jsonParse(jsonStr){
    if(window.JSON){  //要么是JSON对象(true),要么是undefined
        return JSON.parse(jsonStr);
    }else{  //IE7及以下
        return eval('('+jsonStr+')');
    }
}


function jsonParse(jsonStr){
    //用三元运算
    return window.JSON ? JSON.parse(jsonStr) : eval('('+jsonStr+')');
}

7.in运算符

in运算符用来判断一个属性是否属于一个对象（不管是私有属性还是公有属性），返回布尔值
公有属性如果可以调用，也返回真;判断时属性名字要用字符串
‘setInterval’ in window true

把类数组集合转化为数组的函数，封装起来
var utils = {
    listToArray : function (lis) {
        try {
            return Array.prototype.slice.call(lis, 0);
      } catch (e) {
            console.log(e.message);//打印错误信息
            var ary = [];
            for (var i = 0; i < lis.length; i++) {
                ary.push(lis[i]);
           }
            return ary;
       }
   }
};

8.ajax基本写法:

1，var xhr=new XMLHttpRequest();
2，xhr.open(get/post,url,true/false);

get/post:请求方式；
url: 接口(后台提供)；
true/false:同步/异步 同步原地死等 异步多任务
3，xhr.onreadystatechange=function(){} 当状态码改变的时候触发

xhr.readyState==4 代表xhr回来了
xhr.readyStatus==200 代表成功获取到数据
xhr.responseText 存放获取回来的数据
4，xhr.send(null)


;(function(){
    //ajax
    var xhr=new XMLHttpRequest(); //创建一个异步对象
    xhr.open('get','data.txt',false);//get/post方式/接口(地址)/同步(false)还是异步(true)
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){  //404 不存在  //500 服务器错误  //200 成功  //300 本地缓存
            data=JSON.parse(xhr.responseText);//这个属性保存着从接口获取回来的数据，响应文本
      }
   };
    xhr.send(null);//也可以不写null
})();