首页 / JAVASCRIPT / javascript包裹节点提高效率_javascript技巧

javascript包裹节点提高效率_javascript技巧

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript包裹节点提高效率_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9368字，纯文字阅读大概需要14分钟。

内容图文

原理基本是这样，如果传入的是字符串，那么让它们变成一个元素节点，不过这元素节点也可以有许多层，在最内层把要包裹的元素放进。把字符串变成元素节点的方法有如下几个。
1，createElement，IE可以连元素属性也一起创建，但只能创建一层。
2，innerHTML，不过需要对原来的字符串进行处理，IE与FF都有许多意想不到的默认行为，可以为你多加一点东西或少加一点东西。
3，createContextualFragment，由于Opera的行为有点怪异，需要选中修改元素的位置。经日本人的测试，它转换字符串成节点的效率比innerHTML高多了，也安全多了，真是强者愈强，弱者愈弱。如果是传入元素节点，需要克隆一下，要不都变成wrapAll。如果是函数，把当前元素传进去，利用它的某些属性创建一个包裹元素。
最初的实验品（这里的wrapOuter相当于jQuery的wrap）：

代码如下:

 
var parseHTML = function(str) { 
if(document.createRange){ 
var range = document.createRange() 
range.setStartAfter(document.body) 
return range.createContextualFragment(str) 
}else{ 
return document.createElement(str) 
} 
} 
var wrapOuter = function(target,html){ 
var wrap = parseHTML(html) ; 
target.parentNode.insertBefore(wrap,target); 
target.previousSibling.appendChild(target) 
} 

<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
<head> 
<meta charset="utf-8"/> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<style type="text/css"> 
.wrapper { 
margin: 5px 5px 5px 5px; 
padding: 5px 5px 5px 5px; 
background-color:#dfe8f6; 
border: 1px solid magenta; 
} 
.inner{ 
margin:1em; 
height:20px; 
background:#a9ea00 
} 
.border{ 
border:2px solid red; 
} 
</style> 
<title>包裹节点 by 司徒正美</title> 
<script type="text/javascript"> 
window.onload = function(){ 
var parseHTML = function(str) { 
if(document.createRange){ 
var range = document.createRange() 
range.setStartAfter(document.body) 
return range.createContextualFragment(str) 
}else{ 
return document.createElement(str) 
} 
} 
var wrapOuter = function(target,html){ 
var wrap = parseHTML(html) ; 
target.parentNode.insertBefore(wrap,target); 
target.previousSibling.appendChild(target) 
} 
var a = document.getElementById("target"); 
wrapOuter(a,"<div class='border'></div>") 
} 
</ script> 
</head> 
<body id="id10"> 
<div class="container"> 
<div class="inner" id="target">目标节点</div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

发现在Opera中出了些问题，range.setStartAfter(document.body)要改成我们的目标元素才行。再者，将插入包裹元素的方式由insertBefore改为replaceChild，提高效率。

代码如下:

var wrapOuter = function(target,html){ 
var wrap = html 
if(Object.prototype.toString.call(html) === "[object String]"){ 
if(document.createRange){ 
var range=document.createRange(); 
range.selectNodeContents(target); 
wrap = range.createContextualFragment(html).firstChild; 
}else { 
wrap = document.createElement(str); 
} 
} 
target.parentNode.replaceChild(wrap,target); 
wrap.appendChild(target) 
}

<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
<head> 
<meta charset="utf-8"/> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<style type="text/css"> 
.wrapper { 
margin: 5px 5px 5px 5px; 
padding: 5px 5px 5px 5px; 
background-color:#dfe8f6; 
border: 1px solid magenta; 
} 
.inner{ 
margin:1em; 
height:20px; 
background:#a9ea00 
} 
.border{ 
border:2px solid red; 
} 
</style> 
<title>包裹节点 by 司徒正美</title> 
<script type="text/javascript"> 
window.onload = function(){ 
var wrapOuter = function(target,html){ 
var wrap = html 
if(Object.prototype.toString.call(html) === "[object String]"){ 
if(document.createRange){ 
var range=document.createRange(); 
range.selectNodeContents(target); 
wrap = range.createContextualFragment(html).firstChild; 
}else { 
wrap = document.createElement(str); 
} 
} 
target.parentNode.replaceChild(wrap,target); 
wrap.appendChild(target) 
} 
var a = document.getElementById("target"); 
wrapOuter(a,"<div class='border'></div>") 
} 
</ script> 
</head> 
<body id="id10"> 
<div class="container"> 
<div class="inner" id="target">目标节点</div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

代码如下:

 
//给每个匹配元素都增加一个父元素（包裹元素）， 
wrap:function(html){//html可以是元素节点，也可以是html片断 
var _wrap = function(target,html){ 
var wrap; 
if(is(html,"String")){ 
if(document.createRange){ 
var range=document.createRange(); 
range.selectNodeContents(target); 
wrap = range.createContextualFragment(html).firstChild; 
}else { 
wrap = document.createElement(html); 
} 
}else if(html.nodeType){ 
wrap = html.cloneNode(true) 
} 
target.parentNode.replaceChild(wrap,target); 
wrap.appendChild(target) 
} 
if(is(html,"Function")){ 
return this.each(function(el,index){ 
_wrap(el, html.call(el,index)); 
}); 
} 
return this.each(function(el){ 
_wrap(el,html) 
}); 
}, 

把创建包裹元素的方法抽象出来：

代码如下:

 
var _parseHTML = function(el,html){ 
var wrap = html ; 
if(doc.createRange){ 
var range=doc.createRange(); 
range.selectNodeContents(el); 
var wrap = range.createContextualFragment(html).firstChild; 
range.detach(); 
return wrap; 
}else { 
return dom.parseHTML(html); 
} 
} 
//给每个匹配元素都增加一个父元素（包裹元素）， 
wrap:function(html){//html可以是元素节点，也可以是html片断 
var _wrap = function(target,html){ 
var wrap = html ; 
if(!wrap.nodeType){ 
wrap = dom._parseHTML(target,html); 
}else{ 
wrap = html.cloneNode(true) 
} 
target.parentNode.replaceChild(wrap,target); 
wrap.insertBefore(target,null) 
} 
if(is(html,"Function")){ 
return this.each(function(el,index){ 
_wrap(el, html.call(el,index)); 
}); 
} 
return this.each(function(el){ 
_wrap(el,html) 
}); 
}, 
wrapInner:function(html){ 
var _wrap = function(target,html){ 
var wrap = html ; 
if(!wrap.nodeType){ 
wrap = dom._parseHTML(target,html); 
}else{ 
wrap = html.cloneNode(true) 
} 
target.insertBefore(wrap,target.firstChild); 
for(var i=1,n=target.childNodes.length;i<n;i++){ 
wrap.appendChild(target.childNodes[i],null) 
} 
} 
if(is(html,"Function")){ 
return this.each(function(el,index){ 
_wrap(el, html.call(el,index)); 
}); 
} 
return this.each(function(el){ 
_wrap(el,html) 
}); 
}, 
//用一个标签包裹所有匹配元素 
//做法：在第一个匹配元素上添加一个父元素(包裹)，然后把其他匹配元素都转移到此父元素中来 
//wrapAll(html) wrapAll(elem) 
wrapAll:function(html){ 
var wrap = html; 
if(!wrap.nodeType) 
wrap = dom._parseHTML(this[0],html); 
this[0].parentNode.replaceChild(wrap,this[0]); 
return this.each(function(el){ 
wrap.insertBefore(el,null); 
}); 
}, 

到jQuery官网看一下，发现它的包裹节点的方法升级了，每次可以包裹许多层了，而我的每次只能包一层。于是决定调用我原来的parseHTML方法，见这里。

代码如下:

 
var wrap = function(html){//html可以是元素节点，也可以是html片断 
var _wrap = function(target,html){ 
var wrap = html ; 
if(!wrap.nodeType){ 
if(doc.createRange){ 
var range=doc.createRange(); 
range.selectNodeContents(target); 
wrap = range.createContextualFragment(html).firstChild; 
}else{ 
wrap = dom.parseHTML(html,null,true).firstChild 
} 
}else{ 
wrap = html.cloneNode(true) 
} 
target.parentNode.replaceChild(wrap,target); 
while ( wrap.firstChild && wrap.firstChild.nodeType === 1 ) { 
wrap = wrap.firstChild; 
} 
wrap.insertBefore(target,null) 
} 
if(is(html,"Function")){ 
return this.each(function(el,index){ 
_wrap(el, html.call(el,index)); 
}); 
} 
return this.each(function(el){ 
_wrap(el,html) 
}); 
} 
//把每一个匹配元素的子节点都用东西包裹起来 
var wrapInner = function(html){ 
var _wrap = function(target,html){ 
var wrap = html ; 
if(!wrap.nodeType){ 
wrap = dom.parseHTML(html,null,true).firstChild 
}else{ 
wrap = html.cloneNode(true) 
} 
target.insertBefore(wrap,target.firstChild); 
while ( wrap.firstChild && wrap.firstChild.nodeType === 1 ) { 
wrap = wrap.firstChild; 
} 
for(var i=1,n=target.childNodes.length;i<n;i++){ 
wrap.appendChild(target.childNodes[i],null) 
} 
} 
if(is(html,"Function")){ 
return this.each(function(el,index){ 
_wrap(el, html.call(el,index)); 
}); 
} 
return this.each(function(el){ 
_wrap(el,html) 
}); 
} 
//用一个标签包裹所有匹配元素 
//做法：在第一个匹配元素上添加一个父元素(包裹)，然后把其他匹配元素都转移到此父元素中来 
//wrapAll(html) wrapAll(elem) 
var wrapAll = function(html){ 
var wrap = html; 
if(!wrap.nodeType){ 
if(doc.createRange){ 
var range = doc.createRange(); 
range.selectNodeContents(this[0]); 
wrap = range.createContextualFragment(html).firstChild; 
}else{ 
wrap = dom.parseHTML(html,null,true).firstChild 
} 
} else{ 
wrap = html.cloneNode(true) 
} 
this[0].parentNode.replaceChild(wrap,this[0]); 
while ( wrap.firstChild && wrap.firstChild.nodeType === 1 ) { 
wrap = wrap.firstChild; 
} 
return this.each(function(el){ 
wrap.insertBefore(el,null); 
}); 
} 

发现有许多重复代码，再抽象一下，对外人来说，彻底的不知所云，想必jQuery也是这样一步步搞到晦涩难懂的。

代码如下:

 
dom.mixin(dom[fn],(function(){ 
var wrapHelper = function(target,html ){ 
var wrap = html ; 
if(!wrap.nodeType){ 
if(document.createRange){ 
var range=dom.doc.createRange(); 
range.selectNodeContents(target); 
wrap = range.createContextualFragment(html).firstChild; 
} else{ 
wrap = dom.parseHTML(html,null,true).firstChild 
} 
}else{ 
wrap = html.cloneNode(true) 
} 
var insertor = wrap; 
while ( insertor.firstChild && insertor.firstChild.nodeType === 1 ) { 
insertor = insertor.firstChild; 
} 
return [wrap,insertor] 
} 
//用一个标签包裹所有匹配元素 
//做法：在第一个匹配元素上添加一个父元素(包裹)，然后把其他匹配元素都转移到此父元素中来 
//wrapAll(html) wrapAll(elem) 
var wrapAll = function(html){ 
if ( dom.isFunction( html ) ) { 
return this.each(function(el,index) { 
dom(this).wrapAll( html.call(this, index)); 
}); 
} 
var arr = wrapHelper(this[0],html); 
var wrap = arr[0],insertor =arr[1]; 
this[0].parentNode.replaceChild(wrap,this[0]); 
return this.each(function(el){ 
insertor.insertBefore(el,null); 
}); 
} 
//给每个匹配元素都增加一个父元素（包裹元素）， 
var wrap= function( html ) { 
return this.each(function() { 
dom( this ).wrapAll( html ); 
}); 
} 
//把每一个匹配元素的子节点都用东西包裹起来 
var wrapInner = function(html){ 
var _wrap = function(target,html){ 
var arr = wrapHelper(target,html); 
var wrap = arr[0],insertor =arr[1]; 
target.insertBefore(wrap,target.firstChild); 
for(var i=1,n=target.childNodes.length;i<n;i++){ 
insertor.appendChild(target.childNodes[i],null) 
} 
} 
if(is(html,"Function")){ 
return this.each(function(el,index){ 
_wrap(el, html.call(el,index)); 
}); 
} 
return this.each(function(el){ 
_wrap(el,html) 
}); 
} 
return { 
wrapAll:wrapAll, 
wrap:wrap, 
wrapInner:wrapInner 
} 
})()); 

unwrap方法以后再说！

内容总结

以上是互联网集市为您收集整理的javascript包裹节点提高效率_javascript技巧全部内容，希望文章能够帮你解决javascript包裹节点提高效率_javascript技巧所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/310166.html

来源：【匿名】

【上一篇】javascriptfor循环设法提高性能_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【javascript包裹节点提高效率_javascript技巧】教程文章相关的互联网学习教程文章

js页面跳转常用的几种方式_javascript技巧

第一种：复制代码代码如下:<script language="javascript" type="text/javascript"> window.location.href="jb51.jsp?backurl="+window.location.href; </script> 第二种：复制代码代码如下:<script language="javascript"> alert("返回"); window.history.back(-1); </script> 第三种：复制代码代码如下:<script language="javascript"> window.navigate("jb51.jsp"); </script> 第四种：复制代码代码如下:<script language="...

javascript技巧合集

转http://www.blogjava.net/zhaochengming/archive/2010/04/09/317837.html http://www.cnblogs.com/fxgachiever/archive/2010/09/08/1821717.html 事件源对象event.srcElement.tagName event.srcElement.type捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键event.keyCode event.shiftKey event.altKey event.ctrlKey事件返回值event.returnValue鼠标位置 event.x event.y窗体活动元素 d...

12个JavaScript技巧【代码】

在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false，反之返回的是true。...

瞠目结舌的JavaScript技巧

今天在知乎上看到一篇JavaScript技巧，学习并收藏之1. 快速打印一个五分制的评分情况function getRating(rating) { if(rating > 5 || rating < 0) throw new Error(‘数字不在范围内‘); return ‘★★★★★☆☆☆☆☆‘.substring(5 - rating, 10 - rating );}2.拼接重复字符串（abcabcabc）//输出n个‘abc’拼接的字符串var str = new Array(n+1).join(‘abc‘);false => ![]true => !![]undefined => ...

javascript技巧

1.将arguments转化为数组函数中的预定义变量arguments并非一个真正的数组，而是一个类似数组的对象。它具有length属性，但是没有slice, push, sort等函数，那么如何使arguments具有这些数组才有的函数呢？也就是说如何使arguments变成一个真正的数组呢？function args(){ return [].slice.call(arguments)}var m=args(2,5,8) // [2, 5, 8]m.push(10)//可以使用数组方法console.log(m)// [2, 5, 8,10] 2.数组中的最大值var arr...

45个实用的JavaScript技巧、窍门和最佳实践

1 – 在第一次给一个变量赋值的时候不要忘记使用var关键字给一个未定义的变量赋值会导致创建一个全局变量。要避免全局变量。2 – 使用===，而不是＝＝==（或!=）操作符在需要的时候会自动执行类型转换。===（或!==）操作不会执行任何转换。它将比较值和类型，而且在速度上也被认为优于==。12345678[10] === 10 // is false[10] == 10 // is true‘10‘== 10 // is true‘10‘=== 10 // is false [] == 0 ...

看各类框架源码淘来的一些JavaScript技巧【代码】

1. 创建定长的JavaScript数组，并赋空值；出自VUE文档Render函数讲解// 创建定长20的JavaScript数组，并把每个项的值设为null Array.apply(null, { length: 20 }).map(function(v,k,ar){return ar[k] = null; })// 创建定长20的JavaScript数组，并把每个项的值设为undefined Array.apply(null, { length: 20 }).map(function(){}) 2.可靠的类型判断；var arr = [[], {}, function(){}, "", null, undefined, 0, true ];for(var i i...

原生JavaScript技巧大收集(1~10)

1、原生JavaScript实现字符串长度截取01functioncutstr(str, len) {02 vartemp;03 varicount = 0;04 varpatrn = /[^\x00-\xff]/;05 varstrre = "";06 for(vari = 0; i < str.length; i++) {07 if(icount < len - 1) {08 temp = str.substr(i, 1);09 if(patrn.exec(temp) == null) {10 icount = icount + 111 } else{12 icount = icount + 2...

javascript设计模式之解释器模式详解_javascript技巧【图】

神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念：抽象语法树：解释器模式并未解释如何创建一个抽象语法树。它不涉及语法分析。抽象语法树可用一个表驱动的语法分析程序来完成，也可用手写的（通常为递归下降法）语法分析程序创建，或直接client提供。解析器：指的是把描述客户端调用要求...

JavaScript设计模式之单例模式实例_javascript技巧【图】

《Practical Common Lisp》的作者 Peter Seibel 曾说，如果你需要一种模式，那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷，不得不去寻求和总结一种通用的解决方案。不管是弱类型或强类型，静态或动态语言，命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员，在短跑甚至拳击方面有一些优势，在练瑜伽上就欠缺一些。术士和暗影牧师很容易成为一个出色的辅助，而一个背着梅肯满地图飞的敌法就会略显...

JavaScript设计模式之观察者模式（发布者-订阅者模式）_javascript技巧

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式.代码如下: div.onclick = function click (){ alert ( ”click ) }只要订阅了div的click事件. 当点击div的时候, function click就会被触发。那么到底什么是观察者模式呢. 先看看生活中的观察者模式。好莱坞有句名言. “不要给我打电话，我会给你打电话”. 这句话就...

JavaScript设计模式之外观模式实例_javascript技巧

外观模式(门面模式)，是一种相对简单而又无处不在的模式。外观模式提供一个高层接口，这个接口使得客户端或子系统更加方便调用。用一段再简单不过的代码来表示：代码如下: var getName = function(){ return ”svenzeng” } var getSex = function(){ return ‘man } 如果你需要分别调用getName和getSex函数. 那可以用一个更高层的接口getUserInfo来调用.代码如下: var getUserInfo = function(){ var info = a() + b(); return i...

JavaScript设计模式之策略模式实例_javascript技巧

策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。一个小例子就能让我们一目了然。回忆下jquery里的animate方法.代码如下: $( div ).animate( {“left: 200px”}, 1000, ‘linear ); //匀速运动 $( div ).animate( {“left: 200px”}, 1000, ‘cubic ); //三次方的缓动这2句代码都是让div在1000ms内往右移动200个像素. linear(匀速)和cubic(三次方缓动)就是一种策略模式的封装. 再来一个例子. ...

JavaScript设计模式之外观模式介绍_javascript技巧

外观模式说明说明：外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口，使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式，我们经常涉及到的功能，可能需要涉及到几个子接口或子系统，而我们的某个功能，可能只需要这向个多个子接口中的一个或几个组成的顺序封装。如果是业务功能直接对应子接口或子系统的，可能要求开发人员对内部需要相当的了解；你可能需要去了解业务流程是怎么走...

JavaScript设计模式之装饰者模式介绍_javascript技巧

装饰者模式说明说明：通一个类来动态的对另一个类的功能对象进行前或后的修饰，给它辅加一些额外的功能; 这是对一个类对象功能的装饰，装饰的类跟被装饰的类，要求拥有相同的访问接口方法（功能），这在动态面向对象类里，一般以实现同一个接口(interface)来约束实现；装饰类的要有对被装饰类的引用，用于在装饰类的相应方法，调用相应被装饰类的方法，然后对其进行修饰；场景举例:1>. 比如我们生活中的穿衣服，一件衬衣，一件西装...

首页 / JAVASCRIPT / javascript包裹节点提高效率_javascript技巧

javascript包裹节点提高效率_javascript技巧

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript包裹节点提高效率_javascript技巧】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程