JavaScript wraps nodes to improve efficiency_javascript skills

The principle is basically this. If strings are passed in, then let them become an element node. However, this element node can also have many layers, and the elements to be wrapped are placed in the innermost layer. There are several ways to turn strings into element nodes.
1, createElement, IE can create element attributes together, but can only create one layer.
2, innerHTML, but the original string needs to be processed. IE and FF have many unexpected default behaviors, which can add a little more or less for you.
3, createContextualFragment, because Opera’s behavior is a bit weird, you need to select and modify the position of the element. After testing by the Japanese, it is much more efficient and safer than innerHTML in converting strings into nodes. It is true that the strong get stronger and the weak get weaker. If the element node is passed in, it needs to be cloned, otherwise it will become wrapAll. If it is a function, pass the current element in and create a wrapping element using some of its properties.
The initial experiment (wrapOuter here is equivalent to jQuery's wrap):

Copy code The code is as follows:

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>Package Node by Situ Zhengmei</title> <div class="container"> <div class="inner" id="target"> </div>Target node</div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]

Found that there are some problems
in Opera, range.setStartAfter(document.body) needs to be changed to our target element. Furthermore, the method of inserting wrapped elements is changed from insertBefore to replaceChild to improve efficiency.

Copy code

The code is as follows:

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)
}

<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> </title>Package Node by Situ Zhengmei <div class="container"> <div class="inner" id="target"> </div> </div>Target node
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Copy code

The code is as follows:

//Add a parent element (wrapped element) to each matching element,
wrap:function(html){//html can be an element node or an html fragment
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)
});
},

Abstract the method of creating wrapped elements:

Copy code The code is as follows:

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);
}
}
//Add a parent element (wrapped element) to each matching element,
wrap:function(html){//html can be an element node or an html fragment
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 )
});
},
//Wrap all matching elements with a tag
//Method: Add a parent element (wrapping) to the first matching element, and then wrap the other matching elements Elements are transferred to this parent element
//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);
});
},

Go to jQuery official website to have a look, I found that its method of wrapping nodes has been upgraded. It can wrap many layers at a time, but mine can only wrap one layer at a time. So I decided to call my original parseHTML method, see here.

Copy code The code is as follows:

var wrap = function(html){//html can be an element node or an html fragment
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)
});
}
//Wrap the child nodes of each matching element with something
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)
});
}
//Wrap all matching elements with a tag
//Method: Add a parent element (wrapper) to the first matching element, and then transfer other matching elements to this parent element
//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);
});
}

I found that there are a lot of duplicate codes, and if I abstract it a little more, it is completely incomprehensible to outsiders. I guess jQuery is also doing this step by step. to the obscure.

Copy code The code is as follows:

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]
}
//Wrap all matching elements with a tag
/ /Method: Add a parent element (wrapper) to the first matching element, and then transfer other matching elements to this parent element
//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);
});
}
//Add a parent element (wrapped element) to each matching element,
var wrap= function( html ) {
return this.each(function() {
dom( this ).wrapAll( html );
});
}
//Wrap the child nodes of each matching element with something
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
}
})());

The unwrap method will be discussed later!