1渲染数据
（1）案例分析 原有的list中有三个li，并且每个li身上有onmouseover事件
<html>
<body>
<ul class="list">
<li>nihao</li>
<li>1807</li>
<li>webqianduan</li>
</ul>
</body>
</html>
<script>
var lis=document.querySelectorAll("li");
for(var i=0; i<lis.length;i++){
console.log(lis[i].item(i))
lis[i].onmouseover=function(){
this.style.backgroundColor="red"
}
lis[i].onmouseout=function(){
this.style.backgroundColor=""
}
}
</script>
1.字符串拼接，最常用的方法
var data=["手机app开发"，“大数据开发”,"数据爬虫开发" ]；
var st=""
for(var m=0;m<data.length;m++){
st+="<li>"
st+=data[m]
st+="</li>"
}
document.querySelector(".list").innerHTML+=st;
缺点:原有dom的事件都会丢失
原因：就在与innerHTML这个属性，这个属性是返回或设置Dom中的内容，以字符串形式返回，拼接完之后是string类型，而onmouse这些属性是Dom元素对象身上的，所以这些onmouse系列的属性就丢失了。
2 dom循环
var data=["手机app开发"，"大数据开发"，"数据爬虫开发"]；
for(var m=0;m<data.length;m++){
var li=document.createElement("li");
li.innerHTML=data[m];
document.querySelector(.list).appendChild(li)
}
优点:原有的dom身上的事件不会丢失，不影响其他dom
缺点:dom回流次数过多，严重影响网页性能。
3 模板
模板的本质就是字符串
4 文档碎片
优点： 既不影响原有dom的属性，也只回流一次。
var frag=document.createDocumentFragment()
for(var m=0;m<data.length;m++){
var li=document.createElement("li");
li.innerHTML=data[m];
frag.appendChild(li)
}
document.querySelector('.list').appendChild(frag)
Dom回流
每当对dom元素进行增删改的时候，浏览器就会重新加载一个，把新的结果渲染出来。
无论上面的四种方法，新增的li没有onmouseover事件，如果保证新增的li也拥有添加的事件。用dom遍历添加事件是不行的，用事件委托。
var lis=document.querySelectorAll("li");
var list=document.querySelector(".list")
list.onmouseover=function(ev){
var ev=ev||window.event;
var li=ev.target;
for(var i=0; i<list.children.length;i++){
list.children[i].style.background=""
}
li.style.background="blue"
}
事件委托
利用的原理就是事件冒泡机制，但并不是所有的事件都有冒泡机制，比如mouseenter
Mouseleave。
Xml
常见的数据存储格式有两种。一种是json 99.99% 另一种是xml。
- 要有xml申明
- 要有一个根节点
- Xml必须是双标签
- 对大小写敏感
- Xml标签的属性值一定要加引号
Xml中的内容不要使用特殊符号 < > & 等
文档中的空格会被保留
Ajax 获取数据，
Json格式 需要解析 string类型==》json类型"{'name':'zhang'}"==>{'name':'zhang'}
用JSON.parse() ,反过来{'name':'zhang'}==>"{'name':'zhang'}"
用JSON.stringify()
注意事项: josn 里面用双引号 外面只能用单引号
var xmlhttp=new XMLHttpRequest;
xmlhttp.open("GET","01.xml",true)
xmlhttp.send()
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState=4&&xmlhttp.status==200){
//console.log(typeof xmlhttp.responseXML)
var dataobj=xmlhttp.responseXML;
console.dir(dataobj.querySelector('autor'))
//dataobj就是document对象
document.getElementById("autor").innerHTML=dataobj.querySelector('autor').innerHTML
}
}