ChildNodes

childNodes is a property of a node in the Document Object Model (DOM) that returns a NodeList of all direct child nodes. This includes all node types present in the source, such as element nodes, text nodes, comments, and processing instructions. The list is live, meaning it updates automatically as the DOM changes.

A NodeList is an array-like object with a length property and an item(index) method. It can be iterated with a for loop, and in modern environments it can also be traversed with forEach. It is not a true Array, so methods like map or filter may require converting it to an Array first.

A key distinction is between childNodes and children. childNodes includes all types of child nodes, including text and comment nodes, whereas children contains only element nodes. Whitespace and formatting in the HTML source can create text nodes, which appear in childNodes but not in children.

Common usage involves traversing or manipulating the DOM via the childNodes collection. To skip non-element nodes, you can check the node type: 1 indicates an element, 3 indicates a text node. For example, you might loop over node.childNodes and operate only on nodes where child.nodeType === 1.

Related properties include firstChild and lastChild, which reference the first and last direct child nodes, respectively. You can modify the DOM with methods like appendChild, insertBefore, or removeChild, and because childNodes is live, its contents reflect changes to the document immediately. Note that methods like querySelectorAll return a static NodeList, in contrast to the live nature of childNodes.