文档碎片及xml讲解
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>
文档碎片及xml讲解的更多相关文章
- 使用文档碎片(DocumentFragments)追加DOM元素
标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...
- javascript创建文档碎片节点
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- js文档碎片
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- 文档碎片DocumentFragment
文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...
- JS JavaScript中的文档碎片 DocumentFragement JS性能优化
文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
随机推荐
- javascript json 判断项目 是否存在不存在插入foreach 组合 输出
var a = []; var i; a.push({ key: "key1", value: 23 }); a.push({ key: "key2", val ...
- webapi core2.1 Identity.EntityFramework Core进行配置和操作数据 (一)没什么用
https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-2.1&am ...
- 《DSP using MATLAB》Problem 5.38
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- hdu1542 Atlantis 线段树--扫描线求面积并
There are several ancient Greek texts that contain descriptions of the fabled island Atlantis. Some ...
- [原] Android上使用native IO
首先, 官方google play对APK大小有限制: 50M.( https://support.google.com/googleplay/android-developer/answer/113 ...
- SQL Server 并发死锁解决案例备忘
SET @sql = ' SET TRANSACTION ISOLATION LEVEL REPEATABLE READ; SET DEADLOCK_PRIORITY 10 BEGIN TRAN DE ...
- Quart.net配置oracle的坑
引用的Oracle.DataAccess.dll是64位, 生成选项需要去除默认勾选的 “首选32位”,不然会导致未能加载程序集
- pandas读取MySql/SqlServer数据 (转)
在 Anacondas环境中,conda install pymssql ,一直报包冲突,所以采用先在 https://www.lfd.uci.edu/~gohlke/pythonlibs/#nump ...
- jmeter之Throughput Controller
jmeter之Throughput Controller Throughput Controller 这个控制器的命名不准确,因为它不是用来控制吞吐量的.吞吐量控制器允许用户控制执行频率,jmeter ...
- Zookeeper 基本概念学习
1.Zookeeper简介: 1) 中间件,为分布式系统提供协调服务 2) 作用于分布式系统,发挥其优势,可以为大数据服务 3) 支持Java,提供java和c语言的客户端api 2. 分布式系统 1 ...