从选定的选择 JavaScript 对象中获取文本 - JavaScript

在 JavaScript 中，获取文本内容并不是一项难以完成的任务。有许多内置函数可以用来从特定选择的对象中获取文本。本文将介绍如何在 JavaScript 中从选定的选择对象中获取文本。

选择对象

在获取文本内容之前，有必要先了解选择对象。在 HTML 中，选择对象指的是您希望对其进行操作的元素。以下是一些常见的选择对象：

• document 对象：表示整个 HTML 文档。
• element 对象：表示一个 HTML 元素。
• nodeList 对象：表示一组 HTML 元素。

获取元素的文本内容

要获取元素的文本内容，您可以使用 innerText 或 textContent 属性。这两个属性都返回元素的文本内容，但稍有不同。

使用 innerText 属性

innerText 属性返回元素及其后代所有可见文本内容，包括空格和换行符。以下是一个示例：

const element = document.querySelector('#myElement');
const text = element.innerText;
console.log(text);

在此示例中，我们选择了 ID 为 myElement 的元素，并通过 innerText 属性获取了其文本内容。

使用 textContent 属性

textContent 属性返回元素及其后代所有文本内容，但不包括空格和换行符。以下是一个示例：

const element = document.querySelector('#myElement');
const text = element.textContent;
console.log(text);

在此示例中，我们与之前一样选择了 ID 为 myElement 的元素，但使用了 textContent 属性来获取其文本内容。

从 nodeList 中获取文本内容

要从 nodeList 中获取文本内容，您必须遍历 nodeList 中的每个元素并获取其文本内容。以下是一个示例：

const nodeList = document.querySelectorAll('.myClass');
let text = '';
nodeList.forEach(element => {
  text += element.textContent;
});
console.log(text);

在此示例中，我们选择了类名为 myClass 的所有元素，并通过 forEach 函数遍历了 nodeList 中的所有元素，并将它们的文本内容添加到一个字符串变量中。

结论

在 JavaScript 中，从选定的选择对象中获取文本并不是一项困难的任务。 innerText 和 textContent 属性可用于获取单个元素的文本内容，而遍历 nodeList 可用于获取一组元素的文本内容。在处理文本内容时，选择使用哪种方法取决于具体情况。