child和childNodes区别：
-
childNodes是标准属性， child是非标准属性
-
childNodes： 获取节点，不同浏览器表现不同
- IE 只获取元素节点
- 非IE 获取元素节点和文本节点
解决方案： if(元素.nodeName=="#text") continue 或者 if(元素.nodeType != '3') continue
- children: 获取元素节点，浏览器表现相同（如果只想获取DOM节点，使用children就行）
- children: 在IE8及以下， 使用 someElement.children 是包含注释节点的（可以看到nodeType为8是注释节点）
<script>
window.onload = function() {
let box = document.getElementById("box");
let list = document.getElementById("list");
console.log(box.childNodes);
/**
* nodeType 1 元素节点
* 2 属性节点
* 3 文本节点
* */
console.log("个数",box.childNodes.length);
console.log(box.firstChild.nodeType);//3
/**
* 现在我们要取到元素节点--由于换行、空格的存在，所有，上面的nodeType是3
* */
function getFirstEle(ele) {
for(var i=0, e; e=ele.childNodes[i];i++) {
if(e.nodeType === 1) {
return e;
}
}
}
console.log(getFirstEle(box));// span标签
console.log("40行",box.children);// 只返回元素节点
}
</script>
</head>
<body>
<div id="box">
<span>a</span>
121212
</div>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>