JavaScript中innerText,innerHTML,outerText,outerHTML使用心得和区别

 

<div id = "test">
    <span style="color:red">test1</span>
    <span style="color:blue">test2</span>
</div>

object.innerHTML

也就是从对象的起始位置到终止位置的全部内容,包括Html标签

显示的结果是：<span style="color:red">test1</span><span style="color:blue">test2</span>

object.innerText

从起始位置到终止位置的内容, 但它去除Html标签

显示的结果是：test1 test2

object.outerHTML

除了包含innerHTML的全部内容外, 还包含对象标签本身。

显示的结果是：<DIV id=test><SPAN style="COLOR: red">test1</SPAN> <SPAN style="COLOR: blue">test2</SPAN> </DIV>

object.outerText

这个显示的结果与innerText没有什么区别(如果有发现不同的朋友告诉我一声,多谢了)

显示的结果是：test1 test2

 

如果上面的内容太抽象,看完下面的示例就能明白了

<div id = "test">
    <span style="color:red">test1</span>
    <span style="color:blue">test2</span>
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">innerText内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
<a href="javascript:alert(test.outerText)">outerText内容</a>

 

另外说明一点的是这个四个属性只有innerHTML是符合W3C的标准的，其他三个只适用于IE浏览器

还有就是要在非IE的浏览器中输出与innerText一样的结果，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>