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

更新時(shí)間：2014年06月07日 09:13:27 作者：

這篇文章主要介紹了Firefox中使用outerHTML的2種解決方法,需要的朋友可以參考下

對(duì)于DOM對(duì)象的innerHTML屬性想必大家都不會(huì)陌生，但是outerHTML用起來(lái)相對(duì)于會(huì)少一點(diǎn)了，innerHTML屬性返回的是DOM對(duì)象從開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽中所包含的HTML，而outerHTML屬性返回的是包括DOM對(duì)象本身標(biāo)簽在內(nèi)的HTML，下圖能很好的解釋兩個(gè)屬性的區(qū)別：

outerHTML最開(kāi)始是屬于IE的私有屬性，可以查看MSDN上的說(shuō)明：outerHTML Property(http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx)。目前IE、Chrome、Safari、Opera都能支持這個(gè)屬性，杯具的是outerHTML不支持Firefox，在Firefox中該屬性永遠(yuǎn)返回undefined，值得欣慰的是HTML5會(huì)加入這個(gè)屬性。
讓Firefox支持outerHTML屬性可以通過(guò)擴(kuò)展HTMLElement的原型來(lái)實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

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 >Roulette </a>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)，有點(diǎn)繁瑣，而且還要侵入原型。還有一種更簡(jiǎn)單代替的辦法，先創(chuàng)建一個(gè)空節(jié)點(diǎn)，將要獲取outerHTML屬性的DOM對(duì)象添加到這個(gè)空節(jié)點(diǎn)中，然后訪問(wèn)這個(gè)空節(jié)點(diǎn)的innerHTML就行了：

復(fù)制代碼代碼如下:

function outerHtml(elem){
if(typeof elem === "string") elem = document.getElementById(elem);
// 創(chuàng)建一個(gè)空div節(jié)點(diǎn)
var div = document.createElement("div");
// 將復(fù)制的elemCopy插入到空div節(jié)點(diǎn)中
div.appendChild(elem.cloneNode(true));
// 返回div的HTML內(nèi)容
return div.innerHTML;
};

比起上面的辦法，不用去動(dòng)原型，代碼量也少了很多，相信還會(huì)有其他的解決辦法。

您可能感興趣的文章: