「何を言ってやがる、違わねぇよ！
おまえは NodeList で、オレは HTMLCollection だ！
そこになんの違いもありゃしねぇだろうが！」
というわけでどう違うのかって話なんですが、僕はよく分かっていません。分かっていることといえば .childNodes はタグの内側の文字列も扱うという点でしょうか。下のようにすると分かります。
<body>
<p id="p">abcde</p>
</body>
<script>
let p = document.querySelector("#p")
console.log(p.childNodes) // 戻り値 : NodeList [text]
console.log(p.children) // 戻り値 : HTMLCollection []
</script>.childNodes が length = 1 の配列でまだ何か含んでいるのに対して、 .children は length = 0 の配列でこれ以上奥に HTML 要素がないことを示しています。ここでさらに下のようにしてみます。
<body>
<p id="p">abcde</p>
</body>
<script>
let p = document.querySelector("#p")
console.log(p.childNodes[0].textContent) // 戻り値 : abcd
</script>なんか難しい話になると、きっと処理速度が .children のほうが 1ns 速いとかそんなことになるんじゃないかと想像しているんですが、どうなんでしょうね。
