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.
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只返回元素节点。