Javascript 中的 textContent

JavaScript 中的 textContent 属性用于设置和获取页面的文本内容。它用于传递和显示信息、标签和大量数据及其节点的文本内容。TextContent 与 script 标签的 nodeValue 不同，它返回来自多个数据类型子节点的内容。

如果节点是文本节点、处理指令或标签注释，则 javascript textContent 会获取或设置文本。TextContent 显示每个子节点的 textContent 的串联。它向其他节点类型显示处理指令和注释。

语法

JavaScript 文本内容有两种可用语法。第一种语法用于设置节点的文本，第二种语法用于检索节点的文本。

语法 1

以下语法使用文本内容来设置节点的文本。

语法 2

以下语法使用文本内容来获取节点的文本。

返回值

• 一个字符串包含输出节点及其子节点的文本。如果元素是文档或文档类型，则输出显示 null 值。
• 通过设置 textContent 属性，子节点将被替换为单个文本节点。该属性的内容是特定的字符串。

示例

以下示例展示了如何使用 textContent 属性设置和获取各种类型的信息。

示例 1

以下示例在 javascript 中使用文本内容来设置信息。节点数据显示标签的文本。

输出

下图显示了如何使用内容节点设置数据。

示例 2

以下示例在 javascript 中使用文本内容来获取信息。我们可以获取单击函数的按钮的值。

输出

下图显示了如何使用内容节点设置数据。

示例 3

以下示例在 javascript 中使用文本内容来获取信息。我们可以获取单击函数的按钮的值。

输出

下图显示了如何使用内容节点设置数据。

Example4

以下示例使用文本内容对按钮值进行获取和设置信息。单击按钮后，我们可以获取该值。

输出

下图显示了如何使用内容节点设置数据。

示例 5

以下示例使用 innerHtml、innerText 和 textContent 来获取和设置按钮值的信息。单击按钮后，我们可以获得输出数据的差异。

输出

下图显示了如何使用内容节点设置数据。

示例 6

以下示例使用 textContent 来获取列表数据并设置 onclick 按钮值的信息。我们可以获得列表数据和其他标签信息。

输出

下图显示了如何使用内容节点设置数据。

示例 7

如果信息或字符串为空，textContent 不支持空数据。它将空字符串显示为值。

输出

下图显示了如何使用 textContent 节点获取数据。

JavaScript 中 textContent 的关键点

• 当 JavaScript 信息自动删除 HTML 时，使用 textContent 是安全的。
• 文本内容和信息包括空格和内部元素标签。innerHTML 属性将返回这些。
• innerText 属性仅返回文本，不包含任何空格或内部元素标签。textContent 属性返回的文本包含空格但不包含内部元素标签。
• 子树中所有文本节点的值被组合并设置为 textContent，并从 textContent 获取。如果节点没有任何子节点，则字符串为空。
• innerText 返回人类可读的文本，并考虑了 CSS。当 HTML 标签用于数据时，textContent 难以阅读。
• 当在一个节点上设置一个属性时，它的所有子节点都会被移除，取而代之的是一个单一的文本节点，其值为指定的字符串。

结论

textContent 显示多种类型的信息。HTML 标签所需的信息和列表数据通过一个方法显示。