◆ querySelectorAll の NodeList は変化しないけど childNodes の NodeList は変化する
◆ HTMLCollection との違いは Live かどうかじゃなくて HTMLElement か Node か
  ◆ NodeList は TextNode を含められるけど HTMLCollection は無理

DOM のメソッドで HTMLCollection や NodeList が得られるものがあります
いままで違いは HTMLCollection は Live で NodeList が Not Live だと思っていました
Live がどういうものかを詳しく書くと HTMLCollection は DOM 構造が変わればコレクションに含まれるものも変わり NodeList は DOM がどうなろうと配列のように不変というものです

ですが NodeList でも Live な場合がありました

document.body.innerHTML = `
<section id="section">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</section>
`

const live_node_list = section.childNodes
const dead_node_list = document.querySelectorAll("div")
const live_html_collection = document.getElementsByTagName("div")

console.log(live_node_list)
console.log(dead_node_list)
console.log(live_html_collection)

console.log("")
document.querySelector("div").remove()

console.log(live_node_list)
console.log(dead_node_list)
console.log(live_html_collection)

NodeList(7) [text, div.d1, text, div.d2, text, div.d3, text]
NodeList(3) [div.d1, div.d2, div.d3]
HTMLCollection(3) [div.d1, div.d2, div.d3]

NodeList(6) [text, text, div.d2, text, div.d3, text]
NodeList(3) [div.d1, div.d2, div.d3]
HTMLCollection(2) [div.d2, div.d3]

live_node_list と live_html_collection は remove 後に要素が減っています
dead_node_list は変化なしです
名前は live の反対なので dead にしてみましたけど static とか not live のほうが良いのかも?

と まぁこのように NodeList でも live な場合があります
HTMLCollection や NodeList は型で live かどうかは判断できずその値次第です
データ的には live かどうかを表すプロパティを持っていないので どういう手段で取得したかで判別するしかないです
return したり関数に渡したりする場合は live かどうかで意図した動作にならなかったりでハマりポイントになりそうなのでとりあえず配列化しておいたほうが安心だと思います

Live かどうか

試した感じでは昔からある DOM API の childNodes や children や getElementsBy*** を使うと live なものが取得できます
新しめの querySelectorAll は live ではありません
querySelectorAll は複雑なセレクタを扱える分 live にするのはパフォーマンス的に厳しかったのか そもそも live な必要性がないのでしなかったのかなと思います
ただ いつもどおり互換性の都合があるので新しいのは live にしなくてもこれまであったものは live のままにする必要があったのでしょう

そういえば live でない HTMLCollection ってなにかあるのでしょうか
querySelectorAll みたいな比較的最近追加されて HTMLCollection を取得する機能って特になかった気がするので ないのかもしれません

HTMLCollection と NodeList の違い

じゃあ HTMLCollection と NodeList の違いは? と思うかもですが 名前通り HTMLElement か Node かの違いと考えて良いと思います
HTMLCollection は HTMLElement のみなので TextNode などは含められません
NodeList は TextNode なども含められる Node のリストです

また NodeList には HTMLCollection にはないメソッドがあります
keys などのイテレータを取得するメソッドと forEach です
HTMLCollection にはこれらはありませんが Symbol.iterator はあるので

const html_arr = [...html_collection]
const node_arr = [...node_list]

のようにして配列変換は可能です