节点操作 ------------- 子节点

有父节点，也有子节点，例如在列表中获取一堆 li 标签就显得很便捷

---

子节点：

childNodes：可以看出输出结果为9个，但是明明只有四个元素，那剩下的五个是什么呢？可以看到每个 li 标签换行时有回车，回车算文本节点，也就是这个方法会把元素节点和文本节点都输出出来

 <ul class="father">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    <script>
        var father=document.querySelector('.father');
        console.log(father.childNodes); 
    </script>

对此也有解决办法，使用 nodeType 得到属性值，元素节点属性值为 1，文本节点属性值为 3，属性节点的属性值为 2，只要判断是否为1即可

 <ul class="father">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    <script>
        var father=document.querySelector('.father');
        for(var i=0;i<father.childNodes.length;i++){
            if(father.childNodes[i].nodeType==1){
                console.log(father.childNodes[i]);
            }
        }
    </script>

 

 但这种方法太繁琐，不使用这种，有另一种方法

更简便的方法：element.children

 

 <ul class="father">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    <script>
        var father=document.querySelector('.father');
      console.log(father.children);
    </script>