JavaScript如何从DOM元素中提取带空格分隔的文本内容？

问题原因 #

textContent API的工作逻辑是直接拼接所有后代节点的文本内容，不会处理元素之间的分隔逻辑，所以你拿到的多个<span>标签的文本会直接无间隔拼接。

解决方法 #

方法一：直接替换为innerText（适配绝大多数场景） #

innerText返回的是页面上用户实际可见的文本内容，会自动根据元素排版特性增加间隔，直接替换原代码的API即可：

let text = document.querySelector("div.place").innerText;

说明：innerText会忽略被CSS隐藏的元素内容，性能略低于textContent，如果你的场景不需要考虑隐藏元素，这个方法最简单高效。

方法二：手动遍历子元素拼接（可控性最高） #

如果需要自定义分隔规则，或者要筛选特定子元素的内容，可以遍历目标子节点，单独提取文本后用空格拼接：

// 选中div下所有span元素
const spanList = document.querySelectorAll("div.place span");
// 逐个提取文本、去空白后用空格拼接
const text = Array.from(spanList)
  .map(el => el.textContent.trim())
  .filter(text => text.length) // 过滤掉空文本项
  .join(" ");

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