JavaScript는 효율성을 향상시키기 위해 노드를 래핑합니다

원칙은 기본적으로 문자열이 전달되면 요소 노드가 되도록 합니다. 그러나 이 요소 노드는 여러 레이어를 가질 수도 있으며 래핑할 요소는 가장 안쪽 레이어에 배치됩니다. 문자열을 요소 노드로 변환하는 방법에는 여러 가지가 있습니다.
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) 
} 

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

Opera에 문제
가 있는 것을 발견하면 range.setStartAfter(document.body)를 대상 요소로 변경해야 합니다. 또한, 래핑된 요소를 삽입하는 방법을 insertBefore에서 replacementChild로 변경하여 효율성을 높였습니다.

코드 복사

코드는 다음과 같습니다.

var WrapOuter = function(target,html) { 
var Wrap = html 
if(Object.prototype.toString.call(html) === "[객체 문자열]"){ 
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) 
}

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]

코드 복사

코드는 다음과 같습니다.

 
//일치하는 각 요소에 상위 요소(래핑된 요소)를 추가합니다. 
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(대상); 
wrap = range.createContextualFragment(html).firstChild; 
}else { 
wrap = document.createElement(html); if(html.nodeType){ 
wrap = html.cloneNode(true) 
} 
target.parentNode.replaceChild(wrap,target) 
wrap.appendChild(target) 
} 
if(is(html,"함수")){ 
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;iwrap.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;iwrap.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 = 
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]; 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;iinsertor.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 방법은 나중에 설명하겠습니다! 