html节点树分享（html元素间的空格会在节点树上产生一个text节点）

这个小知识点也是我偶然遇到的~~搞了半天才弄懂

根据w3c的HTML DOM标准，HTML中所有内容都是节点,当我用原生js获取dom中的某个节点时，却没有拿到我想拿到的节点。。。

html结构是这样的：

<div>    <div class="a">a节点</div>    <div class="b">b节点</div></div>

然后在我的js中div.b绑定了一个事件，事件源是div.b，在事件触发时，我想要在事件函数中拿到div.a，代码是这样：

var b = document.querySelector(".b");b.addEventListener('click',( e ) => {    //e.target == div.b    var a = e.target.previousSibing;    console.log( a ); //#text});

按照我的想法上面js中的a就是div.a了，结果打印出来却是#text。。。然后我又打印了下最外层div的所有子节点:

var b = document.querySelector(".b");b.addEventListener('click',( e ) => {    //e.target == div.b    var a = e.target.parentNode.childNodes;    console.log( a ); //[ text, div.a, text, div.b, text]});

最后才明白这些text节点就是html代码中的那些空格，假如我们将html代码这么写的话就不会出现这些text节点了：

<div><div class="a">a节点</div><div class="b">b节点</div></div>

我还是太菜了~~~继续努力