如何使用原生JavaScript获取HTML父元素内的非子元素独立文本

原有实现存在的问题 #

• 有逻辑漏洞：如果h1的内容和目标文本存在重复片段，替换操作会误删目标文本的对应内容
• 文本清洗不彻底：仅替换单个换行符，多余的空格、制表符、多个换行无法统一处理
• 执行效率低：需要两次DOM查询+两次字符串替换，不如直接定位节点效率高

推荐优化方案 #

方案1：通用场景（兼容性拉满）

直接定位DOM中的文本节点，不受文本内容、空白符号影响，兼容IE9及以上所有主流浏览器，如需兼容更低版本IE，把Array.from换成普通for循环遍历childNodes，把Node.TEXT_NODE直接写为3即可，改后兼容到IE6。

const divEl = document.querySelector('div');
// 遍历子节点筛选非空文本节点
const targetText = Array.from(divEl.childNodes)
  .filter(node => node.nodeType === Node.TEXT_NODE)
  .map(node => node.textContent.trim())
  .find(text => text);

console.log(targetText); // 输出 grab me

方案2：固定结构场景（效率最高）

如果可以确定结构固定为h1后直接接目标文本，可直接通过相邻节点获取，仅需要一次DOM查询，没有多余遍历和字符串操作。

const h1NextNode = document.querySelector('h1').nextSibling;
const targetText = h1NextNode.textContent.trim();

console.log(targetText); // 输出 grab me

内容的提问来源于stack exchange，提问作者Francis