Dom children 属性及childNodes

Element.children

 children returns a collection of child elements of the given element.The children attribute is read-only.

// parg is an object reference to a <p> element
if (parg.childElementCount)
// So, first we check if the object is not empty, if the object has child nodes
 {
   var children = parg.children;
   for (var i = 0; i < children.length; i++) 
   {
   // do something with each child element as children[i]
   // NOTE: List is live, Adding or removing children will change the list
   };
 };

children 与childNodes区别

.children is a property of an Element. Only Elements have children, and these children are all of type Element.

However .childNodes is a property of Node. .childNodes can contain any node.

So a concrete example would be

var el = document.createElement("div");
el.textContent ="foo"
el.childNodes.length ===1;// TextNode is a node child
el.children.length ===0;// no Element children

Of course .children is DOM4 so browser support is shaky, however if you use the DOM-shim, your cross browser problems will go away!

Most of the time you want to use .children because generally you don't want to loop over TextNodes or Comments in your DOM manipulation.

If you do want to manipulate TextNodes you probably want .textContent instead.

http://stackoverflow.com/questions/7935689/what-is-the-difference-between-children-and-childnodes-in-javascript

children will return the immediate child elements, while childNodes will return all the child nodes, deep nested too, and text as well.

Check the jsFiddle example: http://jsfiddle.net/xRqPv/

 

总结：childNodes会返回元素内的任何节点。而children只返回元素节点。