The difference between children and childnodes

The 1.childNodes property , Standard, returns a collection of child elements of the specified element, including HTML nodes, all attributes, and text. NodeType can be used to determine what type of node, only when Nodetype==1 is the element node, 2 is an attribute node, and 3 is a text node.

Some people mistakenly use () to fetch the collection element, and the following table lists the supported scenarios for ChildNodes (i) for each browser:

	Ie6/7/8/safari/chrome/opera	Ie9/firefox
ChildNodes (i)	Support	Not supported

Sometimes it is necessary to get the first HTML child node (non-attribute/text node) of the specified element, and the most likely thing to think about is the FirstChild property. If there is a newline, a space before the first HTML node in the code, then the FirstChild return is not what you want. You can use the NodeType to judge.

123456

function getFirst(elem){    for(var i=0,e;e=elem.childNodes[i++];){        if(e.nodeType==1)            return e;    }      }

The 2,children property , non-standard, returns a collection of child elements of the specified element. After testing, it returns only the HTML node, not even the text node. and is surprisingly consistent across all browsers. As with ChildNodes, the collection element is not supported under Firefox. So if you want to get the first HTML node for a specified element, you can use children[0] instead of the GetFirst function above. Note that children contains comment nodes in IE.

The difference between children and childnodes