JavaScript는 효율성을 향상시키기 위해 노드를 래핑합니다_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)
}

<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>Situ Zhengmei의 패키지 노드</title> <div class="container"> <div class="inner" id="target"> </div>대상 노드</div>
[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)
}

<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>Situ Zhengmei의 패키지 노드</title> <div class="container"> <div class="inner" id="target"> </div>대상 노드</div>
[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 방법은 나중에 설명하겠습니다!