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. LeetCode - Minimum Area Rectangle

    Given a set of points in the xy-plane, determine the minimum area of a rectangle formed from these p ...

  2. maven(二)

    1.1     Maven的好处 节省空间 对jar包做了统一管理 依赖管理 一键构建 可跨平台 应用在大型项目可提高开发效率 1.2     Maven安装部署配置 1.3     Maven的仓库 ...

  3. linux常见系统调用函数列表

    以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的Linux系统调用列表,即使是简单的字母序英文列表,能做到这么完 ...

  4. 迭代器和增强型for循环

    ★迭代器: Java集合框架的集合类,我们有时候称之为容器.容器的种类有很多种,比如ArrayList.LinkedList.HashSet...,每种容器都有自己的特点,ArrayList底层维护的 ...

  5. 创建一个简单的terraform module

      terraform module可以实现代码的复用,同时方便分享,下面创建一个简单的基于localfile && template provider 的module module ...

  6. sqler sql 转rest api 源码解析（四）macro 的执行

    macro 说明 macro 是sqler 的核心,当前的处理流程为授权处理,数据校验,依赖执行(include),聚合处理,数据转换 处理,sql 执行以及sql 参数绑定 授权处理 这个是通过go ...

  7. ASP.NET Core WebApi使用Swagger生成api说明文档

    1. Swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件 ...

  8. 晒一晒Jenkins那些常用插件

      Jenkins插件大师 作为CI/CD的调度中心,Jenkins具有十八般武艺,目前已有1700多个插件,功能强大到似乎有点过分了.本文主要列出平时我们常用的插件. 以下这两个网站是Jenkins ...

  9. python 属性的访问权限，_,__,__XXX__

    1. 非私有变量,可以随意调用和修改 在class内部,有属性和方法,如下面的class Student 有name和score class Student(object): def __init__ ...

  10. 查看加密的vba代码

    查看加密的vba代码,可以使用这个工具,excel文件里面的宏代码一览无余. https://files.cnblogs.com/files/laoxia/PVP.zip