1.将数据渲染到页面的几种方式
1.字符串拼接
2.dom循环
3.模板
4.文档碎片
字符串拼接：
优势：只进行一次dom回流
缺点：原有的dom事件会消失
案例分析：原有list中有3个li，并且每个li身上都有一个onmouseover的事件，但是为什么用字符串拼接，事件会消失？
解析：原因在于innerHTML这个属性，这个属性是返回或设置dom中的内容，以字符串形式返回，而onmouse这些dom元素对象身上的，所以这些onmouse系列的属性就会消失；
注意：所有的数据类型只要跟字符串发生拼接，最后都会变成字符串
dom循环：
优势：原有dom身上的事件不会丢失，不影响dom
缺点：dom回流次数过多，严重影响网页性能
dom回流：每当对dom元素进行增删改的时候，浏览器就会重新加载一次，把新的结果渲染出来；
模板：
模板的本质就是字符串，只不过将html和js进行分离
文档碎片：
优点：既不能影响原有的dom属性，也只回流一次
我们只需要通过document对象上的createDocumentFragment() 创建文档碎片（相当于一个容器标签，并不会对dom创建的结构造成影响，只需把dom创建的东西放这个里面）
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul class="list">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
</body>
</html>
<script>
var lis=document.querySelectorAll("li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.background="red";
}
lis[i].onmouseout=function(){
this.style.background="";
}
}
var data=["444444","555555","666666"];
var frag=document.createDocumentFragment();
for(var j=0;j<data.length;j++){
var li=document.createElement("li");
li.innerHTML=data[j];
frag.appendChild(li)
}
document.querySelector(".list").appendChild(frag);
</script>
无论上面的四种方法，新增的li没有onmouseover事件，如果保证新增的li也拥有添加的事件，用dom遍历添加事件是不行的，只能用事件委托。
事件委托的原理：
利用的原理就是事件冒泡机制，但不是所有的事件都有冒泡机制，比如onmouseenter onmouseleave;
XML（可拓展标记语言）
xml：储存格式；
html：显示数据；
常见的数据储存格式：
一种是：json占的比例99%：
一种是：xml占的比例1%；
xml的注意事项；
<?xml version="1.0" encoding="UTF-8"?>
<note> (自定义标签的根目录，有且只有一个)
</note>
上面的第一步：开头要写版本号和编码；
xml有且只有一个根目录，标签名字都是自定义；
1.要有xml声明
2.要有一个根节点
3.xm必须是双标签，没有单标签的这一说法
4.对大小写敏感（区分大小写）
5.xml标签的属性值，一定要加引号
6.xml中的内容，不要使用特殊符号；
7.注释：跟html一样，文档中的空格会被保留，命名规则语义化；
Ajax获取xml的内容
xml.responseXML (前面所有的步骤都一样，只是最后一步，服务器响应的xml的内容不一样)
ajax获取的数据分两种；json或xml
json格式需要被解析：string类型=>json类型； '{"name":"zhang"}'=>{"name":"zhang"}
需用的方法 JSON.parse()
json类型=>string类型；{"name":"zhang"}=>'{"name":"zhang"}'
需用的方法 JSON.stringify()
json格式需注意：json里面用双引号，外面只能用单引号；
xml解析：通过案例，xmlhttp.responseXML 我们可以得到document的对象
所以可以使用dom的方法，去得到自己想要的结果
xml案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
</div>
</body>
</html>
<script>
var xmlhttp=new XMLHttpRequest;
xmlhttp.open("get","01.xml",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status=200){
var a=xmlhttp.responseXML;
document.getElementById("div").innerHTML=a.getElementsByTagName("auto")[0].innerHTML;
}
}
}
</script>
xml的文件应该这个写 （文件名：01.xml）
<?xml version="1.0" encoding="UTF-8"?>
<note>
<auto>莫言</auto>
</note>