js 获取标签里的文本内容|极客笔记

js 获取标签里的文本内容

在前端开发中，经常会遇到需要获取标签里的文本内容的情况。比如，当用户点击某个按钮后，需要获取该按钮的文本内容并做相应的处理。在实际开发中，我们可以通过JavaScript来轻松实现这个功能。

使用 innerText 或 textContent 属性

JavaScript提供了两个属性可以用来获取标签里的文本内容：innerText和textContent。这两个属性的作用是一样的，都可以用来获取标签里的文本内容，不同之处在于它们对待空白字符的方式不同。

innerText

innerText属性会返回标签中包含的所有文本内容，并会忽略标签中的样式信息。如果一个元素中包括了子元素，innerText会将子元素里的文本内容也一并返回。

<div id="text">Hello, <span>world</span>!</div>
<script>
const text = document.getElementById("text").innerText;
console.log(text); // 输出: "Hello, world!"
</script>

textContent

textContent属性返回的是标签中所有文本内容，包括标签内的所有元素，以及空白字符。和innerText不同的是，textContent不会忽略标签内的样式信息。

<div id="text">Hello, <span>world</span>!</div>
<script>
const text = document.getElementById("text").textContent;
console.log(text); // 输出: "Hello, world!"
</script>

使用 innerHTML 属性

除了innerText和textContent属性外，我们还可以使用innerHTML属性来获取标签中的文本内容。innerHTML会返回标签中的所有内容，包括文本和标签。

<div id="text">Hello, <span>world</span>!</div>
<script>
const text = document.getElementById("text").innerHTML;
console.log(text); // 输出: "Hello, <span>world</span>!"
</script>