1.渲染数据
（1）案例分析：原有的list中有三个li，并且每个li身上有onmouseover事件
<body>
<div>
<ul class="list">
<li>奥斯特洛夫斯基</li>
<li>哈姆雷特</li>
<li>马歇尔</li>
</ul>
</div>
</body>
</html>
<script>
var lis=document.querySelectorAll("li")
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.backgroundColor="red";
}
lis[i].onmouseout=function(){
this.style.backgroundColor="";
}
}
</script>
1.字符串拼接，最常用的方法
优点：只进行一次DOM回流；
缺点：原有dom的事件都会丢失
原因：就是在于innerHTML这个属性，这个属性是返回或设置dom中的内容，以字符串的形式返回，拼接完之后是string类型，而onmouse这些属性是dom元素对象身上的，所以这些onmouse系列的属性就丢失了
var data=["1982.1.7","1921.5.12","1956.6.4"];
var st+=""
for(var m=0;m<data.length;m++){
st+="<li>"
st+=data[m]
st+="</li>"
}
document.querySelector(".list").innerHTML+=st
2.dom循环
优点：原有的dom身上的事件不会丢失，不能影响其他dom
缺点：dom回流次数过多，严重影响网页性能
dom回流：每当对dom元素进行增删改的时候，浏览器就会重新加载一个，把新的结果渲染出来
var data=["1982.1.7","1921.5.12","1956.6.4"];
for(var m=0;m<data.length;m++){
var li=document.createElement("li");
li.innerHTML=data[m];
document.querySelector(".list").appendChild(li)
}
3.模板
模板的本质就是字符串
4.文档碎片
优点：既不影响与原有dom的属性，也回流一次。
无论上面的四种方法，新增的li没有onmouseover事件，如果保证新增的li也拥有添加的事件。用dom遍历添加事件是不行的，用事件委托
var lis=document.querySelectorAll("li")
var list=document.querySelector(".list")
list.onmouseover=function(){
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标签的属性值一定要加引号
6.Xml中的内容不要使用特殊符号 < > & 等
7.文档中的空格会被保留
Ajax 获取数据
Json格式 需要解析 string类型==>json类型{'name':'zhang'}"==>{'name':'zhang'}
用JSON.parse() ,反过来{'name':'zhang'}==>"{'name':'zhang'}"
用JSON.stringify()
注意事项: josn 里面用双引号 外面只能用单引号
ajas:
var xmlhttp=new XMLHttpRequest;
xmlhttp.open("GET","01.xml",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var data=xmlhttp.responseXML;
console.dir(data.querySelector("autor"));
document.getElementById("autor").innerHTML=data.querySelector("autor").innerHTML
}
}
01.xml:
<?xml version="1.0" encoding="UTF-8"?>
<book>
<autor>奥斯特洛夫斯基</autor>
<date>1924.4.18</date>
<title>钢铁是怎样炼成的</title>
<county>苏联</county>
</book>