使用 JavaScript 获取 h1 标签的文本长度

在前端开发中，经常需要获取 HTML 页面中的元素，JavaScript 是处理这种情况的一种方便、快捷的编程语言。在本文中，我们将介绍如何使用 JavaScript 获取页面中的 h1 标签的文本长度。

方法一：使用 innerText 属性获取文本长度

在 JavaScript 中，我们可以使用 innerText 属性获取元素的文本内容。要获取 h1 标签的文本长度，我们只需要获取 h1 元素的 innerText 属性，然后再使用 length 属性计算其长度即可，代码如下所示：

const h1Text = document.querySelector('h1').innerText;
const h1Length = h1Text.length;
console.log(`h1 标签文本长度为：${h1Length}`);

解释

首先，使用 document.querySelector() 方法获取页面中的第一个 h1 标签元素，然后通过 innerText 属性获取其文本内容，并将其赋值给 h1Text 变量。接下来，使用 length 属性计算 h1Text 的长度，并将其赋值给 h1Length 变量。最后，使用 console.log() 方法将计算得到的文本长度打印出来。

方法二：使用 textContent 属性获取文本长度

与 innerText 属性类似，textContent 属性也可以获取元素的文本内容，此外，textContent 属性可以获取所有子节点的内容，包括空格和换行符。如果需要获取完整的文本内容，可以使用 textContent 属性，如下所示：

const h1Text = document.querySelector('h1').textContent;
const h1Length = h1Text.length;
console.log(`h1 标签文本长度为：${h1Length}`);

解释

与方法一类似，不同之处在于使用了 textContent 属性而不是 innerText 属性。

结论

使用 JavaScript 获取 h1 标签的文本长度非常简单，只需要使用 innerText 或 textContent 属性获取文本内容，然后使用 length 属性计算其长度即可。以上两种方法均适用于获取任何元素的文本长度。