如何从 JavaScript 中的选择标签中获取文本 - HTML

在 JavaScript 中使用选择器来获取 HTML 元素的文本内容非常常见。在本篇指南中，我们将向您介绍如何使用 JavaScript 操作 DOM 元素，从而获取选定元素中的文本内容。

选择元素

在使用 JavaScript 操作 DOM 元素时，首先需要选择元素。选择元素的方法有多种，这里我们介绍最基本的两种方法：通过 ID 或通过类名选择。

通过 ID 选择元素

要通过 ID 选择元素，可以使用 getElementById() 方法。该方法将返回具有指定 ID 属性的元素的引用。

const element = document.getElementById('myId');

在 HTML 中，可以给元素添加一个 ID，如下所示：

<div id="myId">这是要选择的元素</div>

通过类名选择元素

要通过类名选择元素，可以使用 getElementsByClassName() 方法。该方法将返回具有指定类名的所有元素的集合。

const elements = document.getElementsByClassName('myClass');

在 HTML 中，可以给元素添加一个类名，如下所示：

<div class="myClass">这是要选择的元素</div>

获取元素文本

一旦选择了元素，我们就可以从该元素中获取文本内容了。为此，我们可以使用 textContent 属性。这个属性将返回元素的所有文本内容，包括子元素的文本内容。

const element = document.getElementById('myId');
const text = element.textContent;
console.log(text); // 输出元素的文本内容

在上面的代码示例中，我们首先选择了 ID 为 myId 的元素，然后获取了该元素的文本内容。最后，我们在控制台中打印了该文本。

还有另外一个属性 innerText 也可以用来获取文本内容。但是，与 textContent 不同之处在于，innerText 将返回元素的可见文本内容。这意味着，它不会返回被 CSS 隐藏或 HTML 元素遮挡的文本内容。

结论

通过本篇指南，我们向您介绍了如何从 JavaScript 中的选择标签中获取文本 - HTML。我们了解了如何使用基本的选择器和获取属性来获取元素的文本内容。希望这篇指南能够帮助您进一步了解 JavaScript 和 DOM 操作。