children的childNodes区别

childNodes：获取子元素的节点，包括文本节点、元素节点、注释节点；

<div id="box">
    <ul id="ul">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
    <p>我是第二个子节点</p>
</div>
var oBox = document.getElementById("box");
 console.log(oBox.childNodes.length);  //得到的结果为5；

children：获取子元素的元素节点（只包括元素节点）；

var oBox = document.getElementById("box");
 console.log(oBox.children.length);//得到的结果为2；

childNodes模拟children：

function myChild(ele){
    var eleChild = ele.childNodes; //获取所有的子元素(包括文本节点、元素节点、注释节点)；
    var str = [];
    for(var i = 0;i<eleChild.length;i++){ //循环所有的文本节点，以便都能拿到；
        if(eleChild[i].nodeType == 1){  //nodeType == 1 是文本节点；
            str.push(eleChild[i]);//将得到的每一项子元素添加到数组的后面；
        }
    }
    return str;
}
var oBox = document.getElementById("box");
 console.log(myChild(oBox).length);  //得到的是2--所有元素节点