HTML中DOM元素的子节点为空？！firstChild, lastChild, childeNodes[]为空

最近做HTML项目的时候，遇到一个不大不小的知识点，分享给大家

 

问题出现在：JS中获取HTML DOM的节点元素，然后获取子元素，但是，子元素的数量明显不对，而且，第一个元素和最后一个元素都是空！

 

伪代码如下：

 

// 父元素.removeChild(子节点);

// 父元素.remove(节点);

 

   

       

new tab

       

   

 

tab = document.getElementById('tab');

console.log(tab.childeNodes[0]);

// 打印的结果为空

 

研究了一下，才发现： 

由于编码时格式的需要，html代码会有很多空格或空行，但是： 

html文件中，空格也算子节点！！！ 

html文件中，空格也算子节点！！！ 

html文件中，空格也算子节点！！！ 

节点类型是：#text，节点名称：undefined

 

所以，选取节点的时候，一定要注意此项！ 

尽量 避免使用 firstChild, lastChild, childeNodes[0] 或类似的节点选取，因为选取的第一个或最后一个必定是空格，也就是#text