通过innerText属性可以操作元素中包含的所有文本内容,无论文本位于子文档树中的什么位置。在通过innerText读取值是,它会按照由浅入深的顺序,将子文档树中所有文本拼接起来。以下面的HTML代码为例:
<div id="mydiv"> <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="mydiv">Hello world!</div>
可见,设置innerText属性除了先前存在的所有子节点,完全改变了子树。此外,通过设置innerText属性还可以对所有出现在文本中的HTML语法字符进(小于号、大于号引号及和号)行编码。例如,下面的这行代码:
div.innerText = "Hello & welcome, <b>\"reader\"!</b>";
运行之后的结果如下:
<div id="mydiv">Hello & welcome, <b>\"reader\"!</b></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("mydiv"); 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。
使用这两个函数可以确保在不同的浏览器中使用正确的属性。