Firefox 외부 HTML 구현 code_javascript 기술

DOM 수를 줄이면 페이지를 구문 분석하는 과정에서 브라우저의 DOM 트리 및 렌더링 트리 구성 속도가 빨라져 페이지 성능이 향상될 수 있습니다. 이를 위해 TextArea의 첫 번째 화면 렌더링에서 표시되지 않는 페이지의 HTML 부분을 임시로 저장한 다음 렌더링이 완료된 후 이 HTML 부분을 처리하여 이 목적을 달성할 수 있습니다. TextArea에 임시 저장된 HTML 콘텐츠를 페이지에 추가하려면 해당 요소의 externalHTML 속성을 사용하는 것이 가장 쉽고 편리합니다. 그러나 지원되는 브라우저는 IE6, Safari, Operal 및 Chrome입니다. FF4.0에서 테스트되었으며 아직 지원되지 않습니다. 이제 크로스 브라우저 외부 HTML을 구현해 보겠습니다.
outerHTML은 요소 태그 자체를 포함하는 html을 가져오거나 설정하는 것입니다. 구현 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

if( typeof HTMLElement !== "정의되지 않음" && !(HTMLElement.prototype의 "outerHTML")) {
//console.log("define externalHTML")
HTMLElement.prototype.__defineSetter__("outerHTML",function (str){
var 조각 = document.createDocumentFragment();
var div = document.createElement("div")
div.innerHTML =
for(var i=0, n = div.childNodes .length; ifragment.appendChild(div.childNodes[i])
}
this.parentNode.replaceChild(fragment, this); >})//
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var tag = this.tagName;
var attribute = this.attributes;
var attr = [];
//for(속성의 var name){//프로토타입 체인의 멤버 탐색
for(var i=0,n = attribute.length; iif(attributes[i].specified){
attr.push(attributes[i].name '="' attribute[i].value '"')
}
}
return ((!!this.innerHTML) ?
'<' 태그 ' ' attr.join(' ') '>' this.innerHTML '' :
'<' 태그 ' ' attr.join(' ') '/>')
}


:
1 in code 먼저, 브라우저의 기본 구현을 덮어쓰지 않도록 브라우저가 externalHTML을 지원하는지 여부를 감지하는 조건부 판단이 이루어집니다.

2 "__defineSetter__", "__defineGetter__"는 Firefox 브라우저의 비공개 측면입니다. 속성 값을 설정할 때와 속성을 가져올 때 각각 수행할 작업을 정의합니다.
3 "__defineSetter__" "outerHTML"에서는 페이지에 너무 많은 요소를 삽입하여 성능에 영향을 미치는 빈번한 리플로우를 방지합니다. 문서 조각 객체 조각은 페이지에 삽입해야 하는 DOM 요소를 임시로 저장하는 데 사용됩니다.
4 "__defineGetter__" "outerHTML"의 요소 속성 속성을 사용하여 요소에 지정된 속성을 탐색합니다. innerHTML과 결합하면 원래 속성 자체를 포함하는 html 문자열이 반환됩니다.
테스트 코드:

코드 복사 코드는 다음과 같습니다.