javascript遍历节点时打印空白节点怎么办？

总结：在遍历子节点时，优先选择使用children（）方法和firstelementchild（）方法而不是firstchild方法或者childnodes方法，因为它们会打印空白节点

近日在用js做一个遍历二叉树的问题时，遇到一个很奇怪的问题，在使用js的childnodes方法时，打印返回的数组元素时居然出现一大堆的“#text”节点，下面我来演示一下

如下为html部分：

<div class="root">
		  <div class="child_1">
		  </div>
		  <div class="child_1">
		  </div>
</div>

一个root父节点下包含两个div子节点，接下来我试图打印root节点的子节点，通过打印root.childnodes(返回值为一个数组)的元素 的方式来实现，下面为js的代码

 var root=document.getElementsByClassName("root")[0];
	     var array=root.childNodes;
	     var str="";
	     for(var i=0;i<array.length;i++){
	     	str=str+"---"+array[i].nodeName;
	     }
	     console.log(str);

将数组root.childnodes的元素打印出来，打印出来的是“---#text---DIV---#text---DIV---#text”而不是“---DIV---DIV---”为什么呢？原来，程序将父节点<div>和子节点间的空白部分识别为空白节点，打印出来文本节点“#text ”，只有代码间无空白连接<div><div></div></div>才能打印“---DIV---DIV---”

如下：

<div class="root"><div class="child_1"></div><div class="child_1"></div></div>

这食物，工作台打印的便是“---DIV---DIV”

那如果我们使用children（）方法又会怎么样呢？html和js代码如下：

<div class="root">
		  <div class="child_1">
		  </div>
		  <div class="child_1">
		  </div>
	    </div>
	    <script type="text/javascript">
	     var root=document.getElementsByClassName("root")[0];
	     var array=root.children;
	     var str="";
	     for(var i=0;i<array.length;i++){
	     	str=str+"---"+array[i].nodeName;
	     }
	     console.log(str);
	    </script>

这时候，即使有空白节点，也不会打印出来，结果为：---DIV---DIV