What is the difference between children and childNodes in JavaScript

Question

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

User · Answer

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

User · Answer

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

User · Answer

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  lt p gt  or  lt div gt                                     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  lt  ENTITY     gt  node  Removed in DOM4 specification                7    Node PROCESSING INSTRUCTION NODE   A ProcessingInstruction of an XML document                                                                      such as  lt  xml-stylesheet       gt  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   lt  DOCTYPE html gt  for HTML5 documents           11    Node DOCUMENT FRAGMENT NODE        A DocumentFragment node                                                12    Node NOTATION NODE                 An XML  lt  NOTATION     gt  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

User · Answer

Pick one depends on the method you are looking for    I will go with ParentNode children   As it provides namedItem method that allows me directly to get one of the children elements without looping through all children or avoiding to use getElementById etc   e g   ParentNode children namedItem  ChildElement-ID       JS ref current children namedItem  ChildElement-ID       React this  refs ref children namedItem  ChildElement-ID       Vue     I will go with Node childNodes   As it provides forEach method when I work with window IntersectionObserver e g   nodeList forEach  node    gt    observer observe node        IE11 does not support forEach on nodeList  but easy to be polyfilled       On Chrome 83      Node childNodes provides entries  forEach  item  keys  length and values      ParentNode children provides item  length and namedItem

[javascript] What is the difference between children and childNodes in JavaScript?

Examples related to javascript

Examples related to dom