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讲解的更多相关文章

  1. 使用文档碎片（DocumentFragments）追加DOM元素

    标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...

  2. javascript创建文档碎片节点

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  3. createDocumentFragment()　创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  4. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  5. js文档碎片

    //文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...

  6. JS性能优化之创建文档碎片(document.createDocumentFragment）

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  7. 文档碎片DocumentFragment

    文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...

  8. JS JavaScript中的文档碎片 DocumentFragement JS性能优化

    文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...

  9. 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

          讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...

随机推荐

  1. （1）MySQL（入门操作安装\基本指令）

    什么是MySQL MySQL本质上就是用来管理数据的---用来做增.删.改.查 使用MySQL后管理数据就相对简单方便 数据库软件的种类: 1.什么是关系型数据库(关系型数据库特点就是对数据格式可以有 ...

  2. PS学习之小猪佩奇身上纹，掌声送给社会人

    首先准备素材 用ps首先打开素材一 首先对图片去色 快捷键:shift+Ctrl+u 调整色阶 设置高斯模糊: 另存为psd格式,命名为叠加的对象 再次打开素材一,把佩奇拖入到图层里,并调整大小,旋转 ...

  3. Thinkphp，Jquery，Ajax异步发布

    1.在提交表单的HTML页面的<head>中定义一个变量供Jquery使用 <script type='text/javascript'>var handleUrl='< ...

  4. 概率论基础教程 (Sheldon M. Ross 著)

    第1章 组合分析 1.1 引言 1.2 计数基本法则 1.3 排列 1.4 组合 1.5 多项式系数 *1.6 方程的整数解个数 第2章 概率论公里 2.1 引言 2.2 样本空间和事件 2.3 概率 ...

  5. WinForm中执行JS代码（多种方法）

    方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details ...

  6. webpack 4 升级点

    webpack 4 升级点: 默认entry为./src,默认output为/dist sideEffects 在webapck2开始支持ESModule后,webpack提出了tree-shakin ...

  7. hdfs1.0和2.0复习

    1.Namenode元数据两种映射:(1)文件名 -> block数据块的映射(2)block数据块 -> datanode节点地址的映射细节:(1)是持久化到NN的磁盘的(fsimage ...

  8. centos6 下 yum 升级php5 到 php7

    一 [卸载老版本php] 1.查看老版本 2.卸载老版本 yum remove php* 本人使用一下方式卸载老版本 1)yum -y remove php* #这个命令可以卸载部分,但是清除不干净 ...

  9. Jmeter--报错 WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateKeyEx(...) returned error code 5.

    今天要用Jmeter测试服务器性能,发现GUI界面总是有warning提示: WARNING: Could not open/create prefs root node Software\JavaS ...

  10. mysql的变量信息详解

    mysql的变量详解 执行show variables命令可以查看MySQL服务器的变量 变量名 默认值 说明 对应的配置文件参数 auto_increment_increment 1 自增长类型的初 ...