js 读取dom出现额外的换行符号

当使用JavaScript读取DOM元素时，有时会出现额外的换行符，这通常是由于DOM结构中存在文本节点（text node）而引起的。

在DOM结构中，每个元素和文本都被表示为节点，文本节点代表元素中的文本内容。但是，如果在HTML标记中有空格或换行符，这些空格和换行符也会被表示为文本节点。

例如，以下HTML代码：

<div>
  <span>Hello</span>
  <span>World</span>
</div>

将被解析为以下DOM结构：

<div>
  #text
  <span>Hello</span>
  #text
  <span>World</span>
  #text
</div>

注意到这个DOM结构中存在三个文本节点，它们分别是在<div>标记和<span>标记之间的空格或换行符。

如果我们使用JavaScript读取这个DOM结构中的文本内容，例如：

const div = document.querySelector('div');
console.log(div.textContent);

那么控制台输出将会是以下内容：

"
  Hello
  World
"

可以看到，输出结果中存在额外的换行符和空格，这是因为这些文本节点的存在。为了避免这种情况，可以使用trim()函数去掉开头和结尾的空格和换行符，例如：

const div = document.querySelector('div');
console.log(div.textContent.trim());

这将输出以下内容：

"Hello World"

这样就去掉了额外的换行符和空格。