
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>