JavaScript-如何解决“FF不能读取outerHTML”的问题

Question

对于outerHTML这个DOM属性，在IE/Opera/google Chorme等浏览器中都是可以使用的，但唯独Firefox是不支持,请问怎么解决

Answer 1

/**
* 兼容firefox的 outerHTML 使用以下代码后，firefox可以使用element.outerHTML
**/

if(window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});

HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for(var i=0;i<attrs.length;i++){
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});

HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;

});
}

如果嫌繁琐，还有一种更简单代替的办法，先创建一个空节点，将要获取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;
};

Answer 2

创建一个div元素，然后将要读取的元素的克隆对象放到这个div中，读取这个div的childNode即可
document.createElement(“DIV”).appendChild(htmlNode.cloneNode(true)).parentNode.innerHTML)