js碎片节点

//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素
提高页面效率

var d1 = new Date();
//创建十个段落,常规的方式
for(var i = 0 ; i < 1000; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild (oTxt);
document.body.appendChild(p);
}
var d2 = new Date();
document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));

//使用了createDocumentFragment()的程序
var d3 = new Date();
var pFragment = document.createDocumentFragment();
for(var i = 0 ; i < 1000; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
pFragment.appendChild(p);
}
document.body.appendChild(pFragment);
var d4 = new Date();
document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

  

时间: 2024-08-27 20:17:11

js碎片节点的相关文章

JS添加节点方法与JQuery添加节点方法的比较及总结

原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> <

js 获取节点

var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 js 获取节点

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

原生js添加节点的高级简便写法

insertAdjacentHTML()        原生js添加节点element.insertAdjacentHTML(position,text); var obj = document.getElementById("btn1"); obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">"); 原文地址:https://www.cn

js节点使用 碎片节点

js节点,都知道3大类: 元素节点 属性节点 文本节点 常用的呢元素节点,属性节点.还有俩方法,setAttribute()  getAttribute(),设置和获取属性值 在实际工作中呢,长长我们从后台拿到一串数据,要在前台页面展示.我们写好一个html母版后,用for循环,在母版中加入数据,最后插入页面.这个呢就是思路! 为了快捷方便,常常这么干, var str=""; for(var i=0;i<data.length;i++){ str+="<div&

【笔记】科普createDocumentFragment() 创建文档碎片节点

上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢? 大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法 createDocumentFragment(); 这个方法怎么用呢? 其实这个方法就相当于一个收集器 把所有要添加的元素收集起来再打包添加到body里面 思路就是这样以下分享一下代码 <!DOCTYPE html> <html lang="en"> <head> <meta

JS获取节点的兄弟,父级,子级元素

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 <div id="test"> <div></div> <div></div> </div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementById("

js创建节点及其属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>创建节点及其属性</title></head><style> #listShow>li ul{ display: none; } #listShow>li>a{ background:#ccc; } li{ list-s

js获取节点的DOM操作

一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法. 除IE外其他浏览器都可以访问到这个类型. 每个节点都有一个NodeType属性,用于表明节点的类型,节点类型由在Node类型中定义的下列12个常数值来表示,任何节点类型必居其一. 根据这些常量值可以很容易的判断节点类型. if(someNode