Firefox中使用outerHTML的2種解決方法_javascript技巧

對於DOM物件的innerHTML屬性想必大家都不會陌生，但是outerHTML用起來相對於會少一點了，innerHTML屬性返回的是DOM物件從開始標籤到結束標籤中所包含的HTML，而outerHTML屬性返回的是包括DOM物件本身標籤在內的HTML，下圖能很好的解釋兩個屬性的區別：


outerHTML最開始是屬於IE的私有屬性，可以查看MSDN上的說明：outerHTML Property(http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx)。目前IE、Chrome、Safari、Opera都能支援這個屬性，杯具的是outerHTML不支援Firefox，在Firefox中該屬性永遠返回undefined，值得欣慰的是HTML5會加入這個屬性。
讓Firefox支援outerHTML屬性可以透過擴充HTMLElement的原型來實現：

複製程式碼 程式碼如下:

if (typeof(HTMLElement) ! {
 HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {
 var r = this.ownerDocument.createRange();
 r.setStartBefore(this); .createContextualFragment(s);
 this.parentNode.replaceChild(df, this);
 return s;
 });
 HTMLElement.prototype.__defineGML( 🎜> var a = this.attributes, str = " for (; i  if (a[i].specified)
 str = " " Hormis dans les machines a sous preferees universelles, les casinos offrent des jeux par exemple Grandes six roues, Pai Go Poker, Blackjack, Baccarat, la Roulette 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)，有點繁瑣，還要侵入原型。還有一個更簡單取代的辦法，先建立一個空節點，將要取得outerHTML屬性的DOM物件加入這個空節點中，然後再存取這個空節點的innerHTML就行了：

複製程式碼 程式碼如下:function outerHtml(elem){ // 建立一個空div節點

 var div = document.createElement("div");
 // 將複製的elemCopy插入到空div節點中 
 div.appendChild(elem.cloneNode(true));
 // 回傳div的HTML內容
 return div.innerHTML 
};};


比起上面的辦法，不用去動原型，程式碼量也少了很多，相信還會有其他的解決辦法。