【EASYDOM系列教程】之 textContent 属性

Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容。

获取文本内容

textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容。其语法格式如下:

var text = element.textContent;

在上述语法结构中，返回值 text 表示 element 节点及其后代节点的文本内容。

需要说明的是，在上述语法结构中，调用 textContent 属性的 element 表示元素节点。元素节点本身也是一个元素。

值得注意的是: 如果指定节点是 Document 文档节点的话，textContent 返回 null。

我们可以通过如下代码示例，测试如何通过 textContent 属性获取指定节点的文本内容:

var pElement = document.getElementById('p');
console.log(pElement.textContent);

值得注意的是: 如果指定节点的后代节点也包含文本内容的话，那该节点调用 textContent 属性时，则会返回该节点及其所有后代节点的文本内容。

如下 HTML 页面结构:

<p id="content">这是一个<span>段落</span>内容。</p>

如果我们通过上述 <p> 元素调用 textContent 属性的话，得到的结果并不是如下结果:

这是一个内容。

而是如下结果:

这是一个段落内容。

设置文本内容

通过 textContent 属性不仅可以获取 HTML 页面中指定节点及其后代节点的文本内容，还可以设置指定节点的文本内容。其语法结构如下:

element.textContent = "this is some sample text";

值得注意的是: 在节点上设置 textContent 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。

我们可以通过如下代码示例，测试如何通过 textContent 属性设置指定节点的文本内容:

var btn = document.getElementById('btn');
btn.textContent = 'A New Button';

innerText 属性

IE 引入了 node.innerText 属性，意图类似 textContent。但有以下区别：

• textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会。

• innerText 意识到样式，并且不会返回隐藏元素的文本，而 textContent 会。

• 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但 textContent 不会。

• 在 IE (小于等于 IE11 的版本) 中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点。

关于 innerText 属性的具体用法请参考 MSDN社区的相关说明。

浏览器兼容问题解决方案

在实际开发中，我们需要尽量满足所有浏览器对文本内容操作的需求。所以，我们可以使用如下代码解决浏览器之间的兼容问题:

function text(elem, text){
    if(text){
        elem.textContent ? elem.textContent = text : elem.innerText = text;
    }else{
        if(elem.textContent){
            // 表示其他浏览器
            return elem.textContent;
        }else{
            // 表示 IE 浏览器
            return elem.innerText;
        }
    }
}

---

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。