如何提取DOM文本【教程】

本文系统介绍了五种原生DOM文本提取方法——textContent、innerText、innerHTML配合临时DOM解析、childNodes遍历及querySelectorAll批量处理，分别适用于保留空白、获取渲染可见文本、安全剥离标签、精细控制节点类型和高效批量提取等不同场景，并附带实用代码步骤与关键注意事项，帮助开发者精准、安全、高效地从网页中提取所需纯文本内容。

如果您需要从网页中提取特定HTML元素的文本内容，DOM提供了多种原生方法来获取这些信息。以下是几种常用且可靠的DOM文本提取技巧：

一、使用textContent属性

textContent返回元素及其所有后代节点的纯文本内容，不包含任何HTML标签，且会保留空白字符（如换行和缩进）。

1、通过document.getElementById()获取目标元素对象。

2、在该元素对象后直接访问.textContent属性。

3、将返回值赋给变量或输出到控制台进行验证。

二、使用innerText属性

innerText返回元素中用户实际可见的文本内容，会忽略隐藏元素（display: none或visibility: hidden），并自动折叠空白字符。

1、使用document.querySelector()选取具有特定类名或标签名的元素。

2、调用该元素的.innerText属性获取渲染后的文本。

3、注意：innerText在某些旧版浏览器中可能行为不一致，推荐在现代浏览器中使用且需确保元素已渲染完成。

三、使用innerHTML配合正则或DOM解析

innerHTML返回元素内部的完整HTML字符串，若需提取其中的纯文本，可先获取再剥离标签，适用于需保留部分结构语义但需过滤标签的场景。

1、获取目标元素的.innerHTML值。

2、创建临时div元素并将其innerHTML设为该值。

3、读取该临时div的.textContent以安全剥离所有标签。

4、此方法可避免XSS风险，比直接正则匹配更可靠。

四、遍历childNodes提取文本节点

childNodes包含元素的所有子节点（包括文本节点、注释节点等），适合精细控制哪些内容被提取，例如跳过注释或空格文本节点。

1、获取目标元素的.childNodes列表。

2、使用for循环遍历每个节点。

3、判断node.nodeType是否等于3（文本节点类型）。

4、对符合条件的节点，拼接其.nodeValue到结果字符串中。

5、需注意IE8及更早版本中空白文本节点可能缺失。

五、使用textContent与CSS选择器组合定位

结合querySelectorAll与textContent可批量提取多个匹配元素的文本内容，适用于列表项、标题组等重复结构。

1、调用document.querySelectorAll("p.title")获取所有匹配的段落元素。

2、使用forEach遍历NodeList中的每个元素。

3、对每个元素执行.textContent操作并推入数组。

4、该方式支持复杂选择器，如[data-role='content'] > span:first-child。

以上就是《如何提取DOM文本【教程】》的详细内容，更多关于的资料请关注golang学习网公众号！