在前端开发中，经常需要获取网页元素的文本内容。其中一种方法是使用 innerText 属性。这个属性可以返回一个元素及其所有后代元素的文本内容，并去除 HTML 标签和注释。
使用innerText属性
要使用 innerText 属性，需要先获取目标元素。可以使用 document.getElementById() 或 element.querySelector() 等方法来获取元素对象。然后，就可以通过以下方式获取元素的文本内容：
const element = document.getElementById('my-element');
const textContent = element.innerText;
console.log(textContent);上述代码中，我们首先通过 document.getElementById() 方法获取 my-element 元素。接着，我们通过调用 innerText 属性，将该元素的文本内容存储到 textContent 变量中。最后，我们使用 console.log() 打印出 textContent。
innerText与textContent的区别
虽然 innerText 和 textContent 都可以获取元素的文本内容，但它们之间还是有一些区别的。
innerText会自动移除空格、换行符等不可见字符，而textContent不会。innerText在某些情况下可能受 CSS 样式影响，而textContent则不会。例如，如果一个元素设置了display: none;样式，则该元素的innerText属性值为 ""（空字符串），而textContent则仍然可以获取到该元素的文本内容。innerText是只读属性，而textContent可以被修改。这意味着，如果要更新一个元素的文本内容，应该使用textContent。
注意事项
- 如果想获取包含 HTML 标签和注释的所有内容，应该使用
innerHTML属性。 - 在获取
innerText值之前，请确保元素已经加载完毕。否则，可能会返回不准确的值。 - 如果目标元素是表单元素（如
input、textarea等），应该使用value属性来获取其值，而不是使用innerText或textContent。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
---- --------------------------------------------
--------
----- ------- - --------------------------------------
----- ----------- - ------------------
------------------------- -- ------------
---------
-------
-------在上述示例中，我们创建了一个 div 元素，并设置其 id 为 my-element。接着，在 JavaScript 中获取该元素，并使用 innerText 属性获取其文本内容。最后，将文本内容输出到控制台。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14426