如何去掉 html 的空白文本节点 text

为什么会有文本节点

html 中的空白文本节点 text，是由于标签的换行而产生的。下面的例子可以证明这一点

<div id="wrapper">
	<span>abc</span>
	<span>abc</span>
</div>

打印 div 的所有子节点（包括文本节点 text），我们发现：第一个 text 是 div 与 span 的换行，第二个是 span 与span 的换行，第三个是 span 与 div 的换行

如果我们把两个span写在同一行呢？

<div>
	<span>abc</span><span>abc</span>
</div>

这时，text 消失了。这证明了：换行是 text 产生的原因

去掉文本节点的方法

空白文本节点会使得两个元素之间间隔，这有时不是我们想要得。我们可以用以下 3 种方法可以去掉它们。

• 为父标签设置font-size属性（适用于子标签都是<img />等标签）

  #wrapper {
  	font-size: 0px;
  }
  

• 把代码写成一行（缺点是代码不美观）

  <div id="wrapper">
  	<span>abc</span><span>abc</span>
  </div>
  

• 子元素设置为block和浮动

  <div id="wrapper">
  	<img src="a.jpg" style="display: block; float: left;"/>
  	<img src="b.jpg" style="display: block; float: left;"/>
  </div>