Firefox中实现的outerHTML

最新推荐文章于 2021-06-10 14:16:36 发布

weixin_30566149

最新推荐文章于 2021-06-10 14:16:36 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/rentj1/archive/2011/12/28/2304283.html

版权

减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建，从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中，等完成渲染后再处理这部分HTML来达到这个目的。要把TextArea 中暂存的HTML内容添加到页面中，使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML，支持的浏览器有IE6+,safari, operal和 Chrome，经测试FF4.0- 中还不支持。所以我们就来实现一个可以跨浏览器的outerHTML。

outerHTML 就是获取或设置包含元素标签本身在内的html。下面是实现代码：

if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {
	//console.log("defined outerHTML");
	HTMLElement.prototype.__defineSetter__("outerHTML",function(str){
		var fragment = document.createDocumentFragment();
		var div = document.createElement("div");	
		div.innerHTML = str;	
		
		for(var i=0, n = div.childNodes.length; i<n; i++){
			fragment.appendChild(div.childNodes[i]);
		}
		
		this.parentNode.replaceChild(fragment, this);
	});
	
	//
	HTMLElement.prototype.__defineGetter__("outerHTML",function(){
		var tag = this.tagName;
		var attributes = this.attributes;
		var attr = [];
		//for(var name in attributes){//遍历原型链上成员
		for(var i=0,n = attributes.length; i<n; i++){//n指定的属性个数	
			if(attributes[i].specified){
				attr.push(attributes[i].name + '="' + attributes[i].value + '"');
			}		
		}
	
		return ((!!this.innerHTML) ? 
				 '<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' : 
				 '<' + tag + ' ' +attr.join(' ')+'/>');
	});
}

代码说明：

1 代码中首先条件判断来监测浏览器是否支持outerHTML以避免覆盖浏览器原生的实现。

2 "__defineSetter__"，"__defineGetter__" 是firefox浏览器私有方面。分别定义当设置属性值和获取属性要执行的操作。

3 在"__defineSetter__" "outerHTML"中为了避免插入页面中元素过多导致频繁发生reflow影响性能。使用了文档碎片对象fragment来暂存需要插入页面中DOM元素。

4 在"__defineGetter__" "outerHTML" 中使用元素attributes属性来遍历给元素指定的属性。结合innerHTML返回了包含原属本身在内的html字符串。

测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>outerHTML</title>
</head>

<body>
<div id="content" class="test">
	<p>This is <strong>paragraph</strong> with a list following it</p>
	<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>
</div>
<script>
if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {
	console.log("defined outerHTML");
	HTMLElement.prototype.__defineSetter__("outerHTML",function(str){
		var fragment = document.createDocumentFragment();
		var div = document.createElement("div");	
		div.innerHTML = str;	
		
		for(var i=0, n = div.childNodes.length; i<n; i++){
			fragment.appendChild(div.childNodes[i]);
		}
		
		this.parentNode.replaceChild(fragment, this);
	});
	
	//
	HTMLElement.prototype.__defineGetter__("outerHTML",function(){
		var tag = this.tagName;
		var attributes = this.attributes;
		var attr = [];
		//for(var name in attributes){//遍历原型链上成员
		for(var i=0,n = attributes.length; i<n; i++){//n指定的属性个数	
			if(attributes[i].specified){
				attr.push(attributes[i].name + '="' + attributes[i].value + '"');
			}		
		}
	
		return ((!!this.innerHTML) ? 
				 '<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' : 
				 '<' + tag + ' ' +attr.join(' ')+'/>');
	});
}

var content = document.getElementById("content");
alert(content.outerHTML)
</script>
</body>
</html>

转载于:https://www.cnblogs.com/rentj1/archive/2011/12/28/2304283.html

weixin_30566149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Firefox中实现的outerHTML

减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建，从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中，等完成渲染后再处理这部分HTML来达到这个目的。要把TextArea 中暂存的HTML内容添加到页面中，使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML，支持的浏...
复制链接

扫一扫