Not every node is an element. Element nodes are your tags; text nodes hold the characters between them (including whitespace!); comment nodes hold <!-- -->; attributes are nodes too. nodeType identifies which. This is why childNodes can surprise you with whitespace text nodes — prefer children for elements only.
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><ul id="l"> <li>a</li> <li>b</li> </ul><pre id="o"></pre>
<script>const l=document.getElementById('l');document.getElementById('o').textContent='childNodes='+l.childNodes.length+' children='+l.children.length;</script></body></html>