DOM提供五种文本提取方法：一、textContent获取含空白的纯文本；二、innerText获取渲染后可见文本；三、innerHTML配合临时div安全剥离标签；四、childNodes遍历提取文本节点；五、querySelectorAll结合textContent批量提取。
如果您需要从网页中提取特定HTML元素的文本内容，DOM提供了多种原生方法来获取这些信息。以下是几种常用且可靠的DOM文本提取技巧：
textContent返回元素及其所有后代节点的纯文本内容，不包含任何HTML标签，且会保留空白字符（如换行和缩进）。
1、通过document.getElementById()获取目标元素对象。
2、在该元素对象后直接访问.textContent属性。
立即学习“前端免费学习笔记（深入）”；
3、将返回值赋给变量或输出到控制台进行验证。
innerText返回元素中用户实际可见的文本内容，会忽略隐藏元素（display: none或visibility: hidden），并自动折叠空白字符。
1、使用document.querySelector()选取具有特定类名或标签名的元素。
2、调用该元素的.innerText属性获取渲染后的文本。
3、注意：innerText在某些旧版浏览器中可能行为不一致，推荐在现代浏览器中使用且需确保元素已渲染完成。
innerHTML返回元素内部的完整HTML字符串，若需提取其中的纯文本，可先获取再剥离标签，适用于需保留部分结构语义但需过滤标签的场景。
1、获取目标元素的.innerHTML值。
2、创建临时div元素并将其innerHTML设为该值。
3、读取该临时div的.textContent以安全剥离所有标签。
4、此方法可避免XSS风险，比直接正则匹配更可靠。
childNodes包含元素的所有子节点（包括文本节点、注释节点等），适合精细控制哪些内容被提取，例如跳过注释或空格文本节点。
1、获取目标元素的.childNodes列表。
2、使用for循环遍历每个节点。
3、判断node.nodeType是否等于3（文本节点类型）。
4、对符合条件的节点，拼接其.nodeValue到结果字符串中。
5、需注意IE8及更早版本中空白文本节点可能缺失。
结合querySelectorAll与textContent可批量提取多个匹配元素的文本内容，适用于列表项、标题组等重复结构。
1、调用document.querySelectorAll("p.title")获取所有匹配的段落元素。
2、使用forEach遍历NodeList中的每个元素。
3、对每个元素执行.textContent操作并推入数组。
4、该方式支持复杂选择器，如[data-role='content'] > span:first-child。
以上就是如何读取HTML元素内容_DOM文本提取技巧【教程】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
547
收藏
