首頁 > 開發者 > JavaScript
模仿jQuey，建立幾個包裹節點的方法，發現jQuery的方法很低效啊，下一次他又可以說這幾個方法可以提升了多少多少了。原理基本是這樣，如果傳入的是字串，那麼讓它們變成一個元素節點，不過這元素節點也可以有許多層，在最內層把要包裹的元素放進。把字串變成元素節點的方法有如下幾個。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) }
<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <style type="text/css"><br /> .wrapper {<br /> margin: 5px 5px 5px 5px;<br /> padding: 5px 5px 5px 5px;<br /> background-color:#dfe8f6;<br /> border: 1px solid magenta;<br /> }<br /> .inner{<br /> margin:1em;<br /> height:20px;<br /> background:#a9ea00<br /> }<br /> .border{<br /> border:2px solid red;<br /> }<br /> </style><br /> <title>包裹節點 by 司徒正美</title></p><p> <script type="text/javascript"></p><p> window.onload = function(){<br /> var parseHTML = function(str) {<br /> if(document.createRange){</p><p> var range = document.createRange()<br /> range.setStartAfter(document.body)<br /> return range.createContextualFragment(str)<br /> }else{<br /> return document.createElement(str)<br /> }<br /> }<br /> var wrapOuter = function(target,html){<br /> var wrap = parseHTML(html) ;<br /> target.parentNode.insertBefore(wrap,target);</p><p> target.previousSibling.appendChild(target)<br /> }<br /> var a = document.getElementById("target");<br /> wrapOuter(a,"<div class='border'></div>")<br /> }</p><p> </script><br /> </head><br /> <body id="id10"></p><p> <div class="container"><br /> <div class="inner" id="target">目標節點</div><br /> </div><br /> </body><br /></html><br />
運行代碼
發現在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) }
<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <style type="text/css"><br /> .wrapper {<br /> margin: 5px 5px 5px 5px;<br /> padding: 5px 5px 5px 5px;<br /> background-color:#dfe8f6;<br /> border: 1px solid magenta;<br /> }<br /> .inner{<br /> margin:1em;<br /> height:20px;<br /> background:#a9ea00<br /> }<br /> .border{<br /> border:2px solid red;<br /> }<br /> </style><br /> <title>包裹節點 by 司徒正美</title></p><p> <script type="text/javascript"></p><p> window.onload = function(){<br /> var wrapOuter = function(target,html){<br /> var wrap = html<br /> if(Object.prototype.toString.call(html) === "[object String]"){<br /> if(document.createRange){<br /> var range=document.createRange();<br /> range.selectNodeContents(target);<br /> wrap = range.createContextualFragment(html).firstChild;<br /> }else {<br /> wrap = document.createElement(str);<br /> }<br /> }<br /> target.parentNode.replaceChild(wrap,target);<br /> wrap.appendChild(target)<br /> }<br /> var a = document.getElementById("target");<br /> wrapOuter(a,"<div class='border'></div>")<br /> }</p><p> </script><br /> </head><br /> <body id="id10"></p><p> <div class="container"><br /> <div class="inner" id="target">目標節點</div><br /> </div><br /> </body><br /></html><br />
運行代碼
//給每個匹配元素都增加一個父元素（包裹元素）， 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方法以後再說！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
