Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容。
## 获取文本内容
textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容。其语法格式如下:
```javascript
var text = element.textContent;
```
在上述语法结构中,返回值 text 表示 element 节点及其后代节点的文本内容。
需要说明的是,在上述语法结构中,调用 textContent 属性的 element 表示元素节点。元素节点本身也是一个元素。
> **值得注意的是:** 如果指定节点是 Document 文档节点的话,textContent 返回 null。
我们可以通过如下代码示例,测试如何通过 textContent 属性获取指定节点的文本内容:
```javascript
var pElement = document.getElementById('p');
console.log(pElement.textContent);
```
> **值得注意的是:** 如果指定节点的后代节点也包含文本内容的话,那该节点调用 textContent 属性时,则会返回该节点及其所有后代节点的文本内容。
>
> 如下 HTML 页面结构:
>
> ```html
> <p id="content">这是一个<span>段落</span>内容。</p>
> ```
>
> 如果我们通过上述 `<p>` 元素调用 textContent 属性的话,得到的结果并不是如下结果:
>
> ```
> 这是一个内容。
> ```
>
> 而是如下结果:
>
> ```
> 这是一个段落内容。
> ```
## 设置文本内容
通过 textContent 属性不仅可以获取 HTML 页面中指定节点及其后代节点的文本内容,还可以设置指定节点的文本内容。其语法结构如下:
```javascript
element.textContent = "this is some sample text";
```
> **值得注意的是:** 在节点上设置 textContent 属性的话,会删除它的所有子节点,并替换为一个具有给定值的文本节点。
我们可以通过如下代码示例,测试如何通过 textContent 属性设置指定节点的文本内容:
```javascript
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社区的相关说明](https://msdn.microsoft.com/en-us/library/ms533899(v=vs.85).aspx)。
## 浏览器兼容问题解决方案
在实际开发中,我们需要尽量满足所有浏览器对文本内容操作的需求。所以,我们可以使用如下代码解决浏览器之间的兼容问题:
```javascript
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;
}
}
}
```
- 关于
- 第一章 DOM 是什么
- 第一节 DOM 介绍
- 第二节 DOM 树结构
- 第二章 Document 对象
- 第一节 Document 对象介绍
- 第二节 定位页面元素
- 第三节 创建页面元素
- 第三章 Node 对象
- 第一节 Node 对象介绍
- 第二节 判断节点类型
- 第三节 遍历节点
- 第四节 插入节点
- 第五节 删除节点
- 第六节 替换节点
- 第七节 复制节点
- 第八节 textContent 属性
- 第四章 Element 对象
- 第一节 Element 对象介绍
- 第二节 DOM 元素树
- 第三节 定位页面元素
- 第四节 遍历元素
- 第五节 属性操作
- 第六节 innerHTML 属性
- 第五章 样式操作
- 第一节 获取内联样式
- 第二节 获取外联样式表
- 第三节 获取 class 属性
- 第四节 获取当前有效样式
- 第五节 设置内联样式
- 第六节 设置 class 属性
- 第七节 Element 对象的样式属性
- 第六章 事件
- 第一节 什么是事件
- 第二节 注册事件
- 第三节 移除注册事件
- 第四节 Event 事件对象
- 第五节 获取目标元素
- 第六节 阻止默认行为
- 第七节 获取鼠标坐标
- 第八节 事件流
- 第九节 事件委托
- 第七章 表单操作
- 第一节 获取表单
- 第二节 表单操作
- 第三节 表单验证
- 第四节 表单提交
- 第八章 BOM
- 第一节 BOM 是什么
- 第二节 Window 对象
- 第三节 Navigator 对象
- 第四节 History 对象
- 第五节 Location 对象
- 第六节 定时器