当前位置：WEB前端研究-Javascript属性(Attribute)

[js属性]outerHTML与innerHTML,outerText与innerText

时间:2011-09-27来源:源艺工作室

开始之前注意：火狐(firefox)不支持outerHTML,innerText,outerText。

innerHTMl定义：

用来设置或获取位于对象起始和结束标签内的HTML（包括html代码）。所有浏览器都支持

outerHTML定义：

用来设置或获取位于对象起始和结束标签内的HTML（包括HTML代码，且包括自身标签）

outText与innerText定义：

用法上没有什么区别，设置或获取对象的文本

在火狐中扩展innerText,outerText,outerHTML，代码如下：

Code:

//在火狐中扩展outerHTML
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());
});
}
//在火狐中扩展innerText
if (!!document.getBoxObjectFor || window.mozInnerScreenX != null) {
HTMLElement.prototype.__defineSetter__("innerText", function(sText) {
var parsedText = document.createTextNode(sText);
this.innerHTML = "";
this.appendChild(parsedText);
return parsedText;
});
HTMLElement.prototype.__defineGetter__("innerText", function() {
var r = this.ownerDocument.createRange();
r.selectNodeContents(this);
return r.toString();
});
}
//在火狐中扩展outerText
if (!!document.getBoxObjectFor || window.mozInnerScreenX != null) {
HTMLElement.prototype.__defineSetter__("outerText", function(sText) {
var parsedText = document.createTextNode(sText);
this.parentNode.replaceChild(parsedText, this);
return parsedText;
});
HTMLElement.prototype.__defineGetter__("outerText", function() {
var r = this.ownerDocument.createRange();
r.selectNodeContents(this);
return r.toString();
});
}

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="text">
<div id="outer">test-<span id="inner"><span>text</span></span></div>
</div>
<script type="text/javascript">
//在火狐中扩展outerHTML
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());
});
}
//在火狐中扩展innerText
if (!!document.getBoxObjectFor || window.mozInnerScreenX != null) {
HTMLElement.prototype.__defineSetter__("innerText", function(sText) {
var parsedText = document.createTextNode(sText);
this.innerHTML = "";
this.appendChild(parsedText);
return parsedText;
});
HTMLElement.prototype.__defineGetter__("innerText", function() {
var r = this.ownerDocument.createRange();
r.selectNodeContents(this);
return r.toString();
});
}
//在火狐中扩展outerText
if (!!document.getBoxObjectFor || window.mozInnerScreenX != null) {
HTMLElement.prototype.__defineSetter__("outerText", function(sText) {
var parsedText = document.createTextNode(sText);
this.parentNode.replaceChild(parsedText, this);
return parsedText;
});
HTMLElement.prototype.__defineGetter__("outerText", function() {
var r = this.ownerDocument.createRange();
r.selectNodeContents(this);
return r.toString();
});
}
alert(document.getElementById("inner").innerHTML);
alert(document.getElementById("inner").outerHTML);
alert(document.getElementById("inner").innerText);
alert(document.getElementById("inner").outerText);
</script>
</body>
</html>

[提示:可以修改后运行]

编辑：Jerman

前端知识点

前端交互
前端优化及工具
DIV+CSS: CSS基础及常用代码
W3C
Actionscript/Flex: FLA源码及flash应用
Javascript/Ajax: Javascript对象(Object); Javascript方法(Method); Javascript属性(Attribute); Ajax; JS插件; jQuery框架
HTML: HTML基础及探讨