찾다
웹 프론트엔드JS 튜토리얼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)
}


[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 방법은 나중에 설명하겠습니다!
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구