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

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

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

伪代码如下：

// 父元素.removeChild(子节点);
// 父元素.remove(节点);
<div id='main'>
    <div id='tab'>
        <p>new tab</p>
        <a href='baidu.com' id='bd'></a>
    <div>
</div>
tab = document.getElementById('tab');
console.log(tab.childeNodes[0]);
// 打印的结果为空

研究了一下，才发现：
由于编码时格式的需要，html代码会有很多空格或空行，但是：
html文件中，空格也算子节点！！！
html文件中，空格也算子节点！！！
html文件中，空格也算子节点！！！
节点类型是：#text，节点名称：undefined

所以，选取节点的时候，一定要注意此项！
尽量 避免使用 firstChild, lastChild, childeNodes[0] 或类似的节点选取，因为选取的第一个或最后一个必定是空格，也就是#text

---