innerText – 学习画板

首页 » DOM » innerText

innerText

通过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属性除了先前存在的所有子节点,完全改变了子树。此外,通过设置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永远只会生成当前节点的一个子文本节点,而为了确保只生成一个子文本节点,就必须要对文本进行编码。此外,还可以利用innerText属性过滤HTML标签。方法是将innerText设置为等于innerText,这样就可以去掉所有HTML标签,如下所示:

div.innerText = div.innerText;

执行这行代码的结果就是用原来的文本替换容器元素中的所有内容。

IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText,但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性,而且也得到了safari、opera和Chrome的支持。为了确保跨浏览器兼容,有必要想下面这样通过函数来检测可以使用哪个属性:

var div = document.getElementById("content");
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;
    }
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"

这两个函数都接受一个元素,然后检查这个元素是不是有textContent属性。如果有,那么typeof element.textContent应该是“string”;如果没有,那么这两个函数就会改为使用innerText。

使用这两个函数可以确保在不同的浏览器中使用正确的属性。

此文章发表在 DOM. 将 固定链接 加入收藏.