为何innerText会在不可见元素上渲染空白字符？附代码异常

这问题我之前也踩过坑！innerText的行为和我们直觉里的“取纯文本”不太一样，咱们来拆解原因和解决办法：

核心原因：innerText的设计特性 #

innerText本质是模拟浏览器渲染后的文本表现，它会考虑这些因素：

• 元素的可见性状态
• DOM结构里的换行、缩进等排版空白
• 浏览器对文本的换行处理

所以当你的目标元素（或其父元素）不可见，或者DOM结构里有大量换行/空格时，innerText会把这些排版用的空白字符（比如↵换行符、空格）都保留下来，就出现了你看到的{unit: "↵ ↵ … ↵ ", name: "1"}这种情况。

具体可能的触发场景 #

• DOM结构自带空白：比如你的HTML里那个sibling元素是这样写的（有换行和缩进）：

  <div class="unit-container">
    <div class="unit">
      <!-- 这里有换行和缩进 -->
      kg
    </div>
  </div>
  

  这些换行和缩进会被innerText识别为空白字符。
• 元素/父元素不可见：如果目标元素设置了display: none、visibility: hidden，或者被其他元素完全遮挡，innerText在读取文本时会保留元素内部的排版结构空白。
• 嵌套空元素：如果sibling里面有<br>、空的<span>这类元素，也会被解析为换行或空白。

解决办法 #

1. 修剪文本首尾空白 #

最简单的办法就是给innerText加上.trim()，直接去掉首尾的所有空白字符（包括换行、空格、制表符）：

for (let x = 0; x < VALUE_INPUTS.length; x++) {
  const PROPERTY = {};
  let sibling = VALUE_INPUTS[x].parentElement.previousElementSibling;
  // 用trim()清理空白
  PROPERTY.unit = sibling.innerText.trim();
  sibling = sibling.previousElementSibling;
  PROPERTY.name = sibling.innerText.trim();
  console.log(PROPERTY);
  console.log(x);
}

2. 改用textContent #

如果不需要考虑元素的可见性和渲染样式，textContent是更靠谱的选择——它直接读取元素的所有文本节点内容，不会保留排版相关的空白：

PROPERTY.unit = sibling.textContent.trim();

（同样建议加trim()，避免文本中间的多余空白影响）

3. 清理DOM结构 #

如果是HTML代码里的换行/缩进导致的，可以直接优化DOM结构，去掉不必要的空白和空元素，比如把：

<div class="unit">
  kg
</div>

改成：

<div class="unit">kg</div>

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