使用 JavaScript 获取文本内容191

在 JavaScript 中，我们可以使用多种方法来获取元素或文档中的文本内容。本文将介绍几种常用的方法，包括：
innerHTML
textContent
innerText
value

1. innerHTML

innerHTML 属性获取或设置元素的内容（包括 HTML 标签）。它包含元素及其所有后代元素的 HTML 代码。例如：const element = ("my-element");
const html = ;
(html); // 输出元素的 HTML 代码

2. textContent

textContent 属性获取或设置元素的文本内容，但不包括 HTML 标签。它包含元素中所有文本节点的文本。例如：const element = ("my-element");
const text = ;
(text); // 输出元素的文本内容

3. innerText

innerText 属性获取或设置元素的文本内容，类似于 textContent，但它不考虑元素中不可见的文本节点（例如，被隐藏或注释的文本）。例如：const element = ("my-element");
const text = ;
(text); // 输出元素的可见文本内容

4. value

value 属性获取或设置输入元素（例如，文本框、文本区域和选择框）的值。它包含用户输入的文本或选定的选项。例如：const input = ("my-input");
const value = ;
(value); // 输出输入框中的文本

选择合适的方法

使用哪种方法获取文本内容取决于应用程序的具体要求。一般来说：
如果需要包括 HTML 标签，请使用 innerHTML。
如果只需要文本内容，请使用 textContent 或 innerText。
如果需要获取输入元素的值，请使用 value。

示例

以下示例演示了如何使用 JavaScript 从不同的元素类型中获取文本内容：// 获取 div 元素的文本内容
const div = ("my-div");
const divText = ;
(divText);
// 获取 p 元素的文本内容（不包括 HTML 标签）
const p = ("my-p");
const pText = ;
(pText);
// 获取文本框的文本内容
const input = ("my-input");
const inputValue = ;
(inputValue);
// 获取选择框的选定选项文本
const select = ("my-select");
const selectedOption = [].text;
(selectedOption);

2025-01-09

上一篇：兄弟连：JavaScript 入门指南

下一篇：HTML 中的 JavaScript 链接点击事件