I have found myself using JavaScript and I ran across childNodes and children properties. I am wondering what the difference between them is. Also is one preferred to the other?
Add a comment
|
3 Answers
Understand that .children is a property of an Element. 1 Only Elements have .children, and these children are all of type Element. 2
However, .childNodes is a property of Node. .childNodes can contain any node. 3
A concrete example would be:
let el = document.createElement("div");
el.textContent = "foo";
el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0; // No Element children.
Most of the time, you want to use .children because generally you don't want to loop over Text or Comment nodes in your DOM manipulation.
If you do want to manipulate Text nodes, you probably want .textContent or .nodeValue instead. 4
It's important to understand the distinction between the 2, before deciding which one to use: The .textContent property represents the text content of the node and its descendants whereas the .nodeValue property represents the value of the current node.
1. Technically, it is an attribute of ParentNode, a mixin included by Element.
2. They are all elements because .children is a HTMLCollection, which can only contain elements.
3. Similarly, .childNodes can hold any node because it is a NodeList.
4. Or .innerText. See the differences here or here.
-
4Yeah, IE seems to have some problems: quirksmode.org/dom/w3c_core.html#t71 Commented Oct 28, 2011 at 23:12
-
4Actually, children is a property of the parentnode interface, not element. usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes– victorCommented Sep 30, 2014 at 13:37
-
Seems iOS 8.3 (maybe others?) doesn't support
.childrenon XML documents: jsfiddle.net/fbwbjvch/1 Commented May 21, 2015 at 10:12 -
6Only had trouble with this on Microsoft Edge with XML nodes. It appears Microsoft Edge doesn't like children. That's good, I wouldn't want that browser reproducing. Commented Nov 21, 2016 at 2:57
-
2Natural follow-up of "element vs. node": stackoverflow.com/questions/132564/… Commented Jan 27, 2017 at 16:30
Element.children returns only element children, while Node.childNodes returns all node children. Note that elements are nodes, so both are available on elements.
I believe childNodes is more reliable. For example, MDC (linked above) notes that IE only got children right in IE 9. childNodes provides less room for error by browser implementors.
answered Oct 28, 2011 at 22:59
-
2Darn, if only this worked on IE 6-8, it would be a dream come true.– Ry- ♦Commented Oct 28, 2011 at 23:05
-
3@minitech it does work (for some value of work). Apparently
.childrendoesn't filter out comment nodes, but it filters out text nodes.– RaynosCommented Oct 28, 2011 at 23:16 -
2@Raynos: Exactly - same with
.getElementsByTagName('*'). IE can be so annoying sometimes...– Ry- ♦Commented Oct 28, 2011 at 23:17 -
There are shim/polyfill implementations of
childrenthat support IE.– bill.leeCommented Jan 28, 2018 at 7:45
Good answers so far, I want to only add that you could check the type of a node using nodeType:
yourElement.nodeType
This will give you an integer: (taken from here)
| Value | Constant | Description | |
|-------|----------------------------------|---------------------------------------------------------------|--|
| 1 | Node.ELEMENT_NODE | An Element node such as <p> or <div>. | |
| 2 | Node.ATTRIBUTE_NODE | An Attribute of an Element. The element attributes | |
| | | are no longer implementing the Node interface in | |
| | | DOM4 specification. | |
| 3 | Node.TEXT_NODE | The actual Text of Element or Attr. | |
| 4 | Node.CDATA_SECTION_NODE | A CDATASection. | |
| 5 | Node.ENTITY_REFERENCE_NODE | An XML Entity Reference node. Removed in DOM4 specification. | |
| 6 | Node.ENTITY_NODE | An XML <!ENTITY ...> node. Removed in DOM4 specification. | |
| 7 | Node.PROCESSING_INSTRUCTION_NODE | A ProcessingInstruction of an XML document | |
| | | such as <?xml-stylesheet ... ?> declaration. | |
| 8 | Node.COMMENT_NODE | A Comment node. | |
| 9 | Node.DOCUMENT_NODE | A Document node. | |
| 10 | Node.DOCUMENT_TYPE_NODE | A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents. | |
| 11 | Node.DOCUMENT_FRAGMENT_NODE | A DocumentFragment node. | |
| 12 | Node.NOTATION_NODE | An XML <!NOTATION ...> node. Removed in DOM4 specification. | |
Note that according to Mozilla:
The following constants have been deprecated and should not be used anymore: Node.ATTRIBUTE_NODE, Node.ENTITY_REFERENCE_NODE, Node.ENTITY_NODE, Node.NOTATION_NODE
