有时候，我们需要在前端代码中定位和处理 HTML 页面中的所有文本节点。本文将介绍如何使用 JavaScript 和 DOM API 来实现这个任务。
什么是文本节点？
在 HTML 中，文本节点是指任何不包含标签或其他 HTML 元素的纯文本内容。这些文本节点通常出现在 HTML 文档中的各种位置，例如 <p>、<a>、<span> 等标签内部，或者在注释中。
如何查找文本节点？
要查找 HTML 页面中的文本节点，可以使用以下步骤：
- 获取文档根元素（通常是
<html>或<body>）。 - 遍历根元素的所有子元素，递归地搜索其子元素，直到找到一个文本节点。
- 对每个文本节点进行处理，例如提取文本内容并执行其他操作。
下面是具体的 JavaScript 代码实现：
-- -------------------- ---- -------
-------- --------------------- -
----- --------- - ---
-- ----------------- --- --------------- -
------------------------
- ---- -
----- -------- - -------------------
--- ---- - - -- - - ---------------- ---- -
---------------------------------------------
-
-
------ ----------
-
----- ----------- - -------------------------
----- ------------ - --------------------------
--------------------------这段代码定义了一个名为 getTextNodes 的递归函数，该函数接受一个 DOM 元素作为参数，并返回该元素及其所有子元素中的文本节点。在这个函数中，我们首先检查当前元素是否是文本节点，如果是，则将其添加到结果数组中；否则，我们递归地遍历该元素的子元素，并将其子节点的结果合并到结果数组中。
最后，我们可以使用 document.documentElement 获取文档的根元素，并调用 getTextNodes 函数来获取所有文本节点。运行这段代码会在浏览器控制台中输出一个包含所有文本节点的数组，方便后续处理和操作。
总结
在本文中，我们介绍了如何使用 JavaScript 和 DOM API 在 HTML 页面中查找所有文本节点。通过递归遍历 DOM 树，我们可以有效地定位和处理文本节点。这对于一些需要操作页面纯文本内容的场景非常有用，例如搜索引擎爬虫、文本分析、语音合成等应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30326