DOM提供五种文本提取方法：一、textContent获取含空白的纯文本；二、innerText获取渲染后可见文本；三、innerHTML配合临时div安全剥离标签；四、childNodes遍历提取文本节点；五、querySelectorAll结合textContent批量提取。
如果您需要从网页中提取特定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。
以上就是如何读取HTML元素内容_DOM文本提取技巧【教程】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606775.html
微信扫一扫 
支付宝扫一扫 
