当我们需要在前端操作 DOM 元素的文本内容时，innerText 和 textContent 是两个常用的属性。另一种方式是检索每个文本节点并手动处理它们的文本内容。在本文中，我们将比较这三种方法，探讨它们的不同之处，以及何时使用哪种方法。
innerText 和 textContent
innerText 和 textContent 属性都可以用来获取或设置元素的文本内容。它们的区别在于：
innerText受 CSS 样式的影响，会忽略像<script>、<style>这样的元素及其子元素的内容，返回渲染后的文本内容。textContent返回元素的所有文本内容，包括隐藏的文本，但不考虑样式的影响。
示例代码：
---- ------------- ------- -- ---- ------------ ----------------- ---- ---- ------ -------- ----- ---------- - ----------------------------------- ---------------------------------- -- ---- -- ---- ---- ---- ---- ---- ------------------------------------ -- ---- -- ---- ---- ---- ---- ---- ---------
检索每个文本节点
另一种方式是检索元素的所有文本节点并遍历每个节点，手动处理其文本内容。这种方式通常用于需要对文本进行更细粒度的操作时，比如在某些文本节点中添加链接等。
示例代码：
---- -------------
------- -- ---- ------------ -----------------
---- ----
------
--------
----- ---------- - -----------------------------------
----- ------ - --------------------------
-----------
---------------------
-----
-----
--
--- -----
----- ------ - ------------------- -
------------------------------
-
---------比较和使用场景
innerText在大多数情况下是最好的选择，因为它会忽略不需要的元素，返回渲染后的文本内容。如果你只需要对整个元素的文本内容进行操作，则使用innerText。- 如果需要获取所有文本内容，包括隐藏的文本，并且不考虑样式的影响，则使用
textContent。 - 如果需要对文本进行更细粒度的操作，则检索每个文本节点并手动处理它们的文本内容。
总之，在选择使用哪种方式时，请根据具体需求进行选择。
希望这篇文章可以帮助你更好地理解 innerText、textContent 和检索文本节点的区别，以及何时使用它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28252