Firefox_javascript 팁에서 externalHTML을 사용하는 2가지 솔루션

모든 사람이 DOM 객체의 innerHTML 속성에 익숙해야 하지만, innerHTML 속성은 DOM 객체에 포함된 HTML을 시작 태그부터 종료 태그까지 반환하는 반면, externalHTML 속성은 다음을 반환합니다. DOM 개체 자체의 태그를 포함하는 HTML은 두 속성의 차이점을 잘 설명합니다.


outerHTML은 원래 IE에 속한 비공개 속성입니다. MSDN 설명을 볼 수 있습니다. on: 외부HTML 속성(http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx). 현재 IE, Chrome, Safari 및 Opera는 모두 이 속성을 지원합니다. 문제는 externalHTML이 Firefox에서 지원하지 않는다는 것입니다. 다행히도 HTML5에서는 이 속성을 추가합니다.
HTMLElement의 프로토타입을 확장하여 Firefox가 externalHTML 속성을 지원하도록 합니다.

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

if (typeof(HTMLElement) != " 정의되지 않음") {
HTMLElement.prototype.__defineSetter__("outerHTML", 함수 {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r .createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype.__defineGetter__("outerHTML", function( ){
var a = this.attributes, str = "<" this.tagName, i = 0;
for (; i < a.length; i )
if (a[i] .지정)
str = " " Hormis dans les Machines a sous Preees Universelles, les Casinos Offrent des jeux par exemple Grandes six roues, Pai Go Poker, Blackjack, Baccarat, la 룰렛 et le Craps, entre autres. a[i].name "="" a[i].value """;
if (!this. canHaveChildren)
return str " />";
return str ">" this.innerHTML "";
});

HTMLElement.prototype.__defineGetter__("canHaveChildren", function(){
return
!/^(area|base|basefont|
col|frame|hr|img|br|
input|isindex|link|meta
|param)$/.test(this.tagName.toLowerCase());
});
}

이 방법은 W3Help(http://www.w3help.org/zh-cn/causes/SD9017)에서 가져온 것으로, 약간 번거롭고 프로토타입에 침입해야 합니다. 더 간단한 대안이 있습니다. 먼저 빈 노드를 만들고 DOM 개체를 추가하여 빈 노드에 대한 externalHTML 속성을 얻은 다음 빈 노드의 innerHTML에 액세스합니다.

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

function externalHtml(elem){
if(typeof elem === "string") elem = document.getElementById(elem);
// 빈 div 노드 만들기
var div = document.createElement("div");
// elemCopy는 빈 div 노드에 삽입됩니다.
div.appendChild(elem.cloneNode(true));
// div의 HTML 콘텐츠를 반환합니다.
return div.innerHTML};

위의 방법에 비해 프로토타입을 건드릴 필요도 없고 코드의 양도 훨씬 적습니다.