JS里兼容ie和FF的outerHTML方法

最新推荐文章于 2023-09-15 14:00:00 发布

lemonsee

最新推荐文章于 2023-09-15 14:00:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： ie function input 扩展

本文链接：https://blog.youkuaiyun.com/lemonsee/article/details/7925969

WEB前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种通过JavaScript扩展DOM元素的方法，实现获取元素的outerHTML属性，并提供了元素outerHTML的设置功能。该方法适用于现代浏览器环境，展示了如何利用__defineGetter__和__defineSetter__来扩展HTMLElement原型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加下面的代码添加一段DOM原型扩展方法

var  print={
	getById:function(id){
		return document.getElementById(id);
	},
	outHtml:function(id){
	if(typeof(HTMLElement)!="undefined" && !window.opera)   
		{   
			HTMLElement.prototype.__defineGetter__("outerHTML",function()   
		   {   
				var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)   
			  if(a[i].specified)   
				   str+=" "+a[i].name+'="'+a[i].value+'"';   
			   if(!this.canHaveChildren)   
				   return str+" />";   
			   return str+">"+this.innerHTML+"</"+this.tagName+">";   
			});   
		   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__("canHaveChildren",function()   
		   {   
			   return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());   
			});   
		}   
		var self=this;
		alert(self.getById(id).outerHTML);
	}
} 
print.outHtml("outer");