Firefox中使用outerHTML的2种解决方法

 更新时间:2014年06月07日 09:13:27   作者:   我要评论

这篇文章主要介绍了Firefox中使用outerHTML的2种解决方法,需要的朋友可以参考下

对于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; 
};

比起上面的办法,不用去动原型,代码量也少了很多,相信还会有其他的解决办法。

您可能感兴趣的文章:

相关文章

  • JS实现简单的二维矩阵乘积运算

    JS实现简单的二维矩阵乘积运算

    这篇文章主要介绍了JS实现简单的二维矩阵乘积运算方法,涉及JavaScript基于数组操作实现矩阵运算的功能,需要的朋友可以参考下
    2016-01-01
  • javascript实现简单的可随机变色网页计算器示例

    javascript实现简单的可随机变色网页计算器示例

    这篇文章主要介绍了javascript实现简单的可随机变色网页计算器,具有基本的四则运算与背景色随机变换功能,需要的朋友可以参考下
    2016-12-12
  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下
    2016-04-04
  • JavaScript声明变量名的语法规则

    JavaScript声明变量名的语法规则

    这篇文章主要给大家简单介绍了JavaScript声明变量名的语法规则,非常有助于大家学习javascript,有需要的小伙伴可以参考下。
    2015-07-07
  • node.js 一个简单的页面输出实现代码

    node.js 一个简单的页面输出实现代码

    最近决定重拾node.js,用它来做一个合并JS文件的东西。由于忘得差不多了,先看能不能输出一个页面来再说。以下是我的一些笔记,省得以后又忘净光
    2012-03-03
  • webpack+vue-cil中proxyTable处理跨域的方法

    webpack+vue-cil中proxyTable处理跨域的方法

    这篇文章主要介绍了webpack+vue-cil中proxyTable处理跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • JS实现列表页面隔行变色效果

    JS实现列表页面隔行变色效果

    这篇文章主要为大家详细介绍了JS实现列表页面隔行变色效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS中使用变量保存arguments对象的方法

    JS中使用变量保存arguments对象的方法

    这篇文章主要介绍了JS中使用变量保存arguments对象的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 提高 DHTML 页面性能

    提高 DHTML 页面性能

    提高 DHTML 页面性能...
    2006-12-12
  • JS实现自定义弹窗功能

    JS实现自定义弹窗功能

    浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。下面小编给大家带来了JS实现自定义弹窗,感兴趣的朋友一起看看吧
    2018-08-08

最新评论