What is the difference between children and childNodes in JavaScript?
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
instead. 4
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.
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.
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