搞懂children和childNodes

children（HTMLCollection）

children返回的是一个元素的子元素，只包括元素节点，不包含文本节点、注释节点

    
    
        
 i am text node
            
 i am text node too
            

        
    

childNodes (Nodelist)

childNodes返回的是所有子节点的一个集合，包括元素节点、文本节点、注释节点（如果一段文本被一个注释所分开，那么这里就有三个节点：文本节点、注释节点、文本节点）

    
    
        
 i am text node
            
 i am text node too
            

        
    

补充

关于nodeType：

元素节点：nodeType === 1
属性节点：nodeType === 2
文本节点：nodeType === 3
注释节点：nodeType === 8
文档节点(document)：nodeType === 9

关于HTMLCollection和NodeList：

主要区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。

NodeList

NodeList的成员可以是任意类型的节点

NodeList可以是动态的（element.childNodes）也可以是静态的(document.querySeletorAll())

所谓动态指的是这个集合是动态的，如果动态添加子元素，那么这个集合也会发生变化

NodeList有length，forEach方法，keys()，values()等，是一个类数组

HTMLCollection

HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，但是与NodeList接口不同，HTMLCollection没有forEach方法，只能使用for循环遍历。

返回HTMLCollection实例的，主要是一些Document对象的集合属性，比如document.links、document.forms、document.images等。

以及document.getElementsByTagName(),document.getElementsByClassName(),element.children()等

HTMLCollection实例都是动态集合，节点的变化会实时反映在集合中