對於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) != "undefined") {
HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {
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].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 <a href="http://topcasinosenligne.com/la-roulette">Roulette </a>et le Craps, entre autres. a[i].name "="" a[i].value """;
if (!this.canHaveChildren)
return str " />";
return str ">" this.innerHTML "<!--" this.tagName "-->";
});
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){
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;
};
比起上面的辦法,不用去動原型,代碼量也少了很多,相信還會有其他的解決辦法。