JavaScript高级程序设计之DOM 扩展之专有扩展之插入文本第11.4.4讲

前面介绍过，IE 原来专有的插入标记的属性innerHTML 和outerHTML 已经被HTML5 纳入规范。
但另外两个插入文本的专有属性则没有这么好的运气。这两个没有被HTML5 看中的属性是innerText
和outerText。
1. innerText 属性
通过innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过
innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过
innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。来看下面这

个HTML 代码示例。

<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

对于这个例子中的<div>元素而言，其innerText 属性会返回下列字符串：

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

由于不同浏览器处理空白符的方式不同，因此输出的文本可能会也可能不会包含原始HTML 代码
中的缩进。
使用innerText 属性设置这个<div>元素的内容，则只需一行代码：

div.innerText = "Hello world!";

执行这行代码后，页面的HTML 代码就会变成如下所示。

<div id="content">Hello world!</div>

设置innerText属性移除了先前存在的所有子节点，完全改变了DOM子树。此外，设置innerText
属性的同时，也对文本中存在的HTML 语法字符（小于号、大于号、引号及和号）进行了编码。再看
一个例子。

div.innerText = "Hello & welcome, <b>\"reader\"!</b>";

运行以上代码之后，会得到如下所示的结果。
<div id="content">Hello &amp; welcome, &lt;b&gt;&quot;reader&quot;!&lt;/b&gt;</div>
设置innerText 永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，
就必须要对文本进行HTML 编码。利用这一点，可以通过innerText 属性过滤掉HTML 标签。方法是
将innerText 设置为等于innerText，这样就可以去掉所有HTML 标签，比如：

div.innerText = div.innerText;

执行这行代码后，就用原来的文本内容替换了容器元素中的所有内容（包括子节点，因而也就去掉
了HTML 标签）。
支持innerText 属性的浏览器包括IE4+、Safari 3+、Opera 8+和Chrome。Firefox 虽然不支持
innerText，但支持作用类似的textContent 属性。textContent 是DOM Level 3 规定的一个属性，其
他支持textContent 属性的浏览器还有IE9+、Safari 3+、Opera 10+和Chrome。为了确保跨浏览器兼
容，有必要编写一个类似于下面的函数来检测可以使用哪个属性。

function getInnerText(element){
return (typeof element.textContent == "string") ?
element.textContent : element.innerText;
}
function setInnerText(element, text){
if (typeof element.textContent == "string"){
element.textContent = text;
} else {
element.innerText = text;
}
}

这两个函数都接收一个元素作为参数，然后检查这个元素是不是有textContent 属性。如果有，
那么typeof element.textContent 应该是"string"；如果没有，那么这两个函数就会改为使用
innerText。可以像下面这样调用这两个函数。

setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"

使用这两个函数可以确保在不同的浏览器中使用正确的属性。
实际上，innerText 与textContent 返回的内容并不完全一样。比如，
innerText 会忽略行内的样式和脚本，而textContent 则会像返回其他文本一样返
回行内的样式和脚本代码。避免跨浏览器兼容问题的最佳途径，就是从不包含行内样
式或行内脚本的DOM 子树副本或DOM 片段中读取文本。
2. outerText 属性
除了作用范围扩大到了包含调用它的节点之外，outerText 与innerText 基本上没有多大区别。
在读取文本值时，outerText 与innerText 的结果完全一样。但在写模式下，outerText 就完全不
同了：outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。比如：

div.outerText = "Hello world!";

这行代码实际上相当于如下两行代码：

var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);

本质上，新的文本节点会完全取代调用outerText 的元素。此后，该元素就从文档中被删除，无
法访问。
支持outerText 属性的浏览器有IE4+、Safari 3+、Opera 8+和Chrome。由于这个属性会导致调用
它的元素不存在，因此并不常用。我们也建议读者尽可能不要使用这个属性。