види вибірки DOM елементів в JavaScript

у JavaScript при виборці DOM елементів є два види структури даних,
які, відповідно, поводяться по-різному:

HTMLCollection - Жива колекція (Live collection)
HTMLCollection автоматично оновлюється при змінах DOM.
Якщо елемент видаляється з DOM, він зникає і з колекції.

Методи, що повертають HTMLCollection:

document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
  Елементи-властивості:
element.children,
document.forms,
document.images  etc

NodeList - зазвичай Статичний список
NodeList буває двох типів:
Статичний (non-live) - не змінюється при змінах DOM
Живий (live) - оновлюється при змінах DOM (рідкісний випадок)

Методи, що повертають NodeList:

document.querySelectorAll() // статичний NodeList (частіше використовується)
element.childNodes // живий NodeList

перевірити можемо наступним чином

const byName = document.getElementsByName('test');
console.log(byName.constructor.name); // "NodeList"
console.log(byName instanceof NodeList); // true
console.log(byName instanceof HTMLCollection); // false

const byClass = document.getElementsByClassName('test');
console.log(byClass.constructor.name); // "HTMLCollection"

const boxes = document.querySelectorAll('.box'); // static NodeList
console.log(boxes.length); // 3

boxes[0].remove(); // delete element from DOM

console.log(boxes.length); // 3 -- NodeList not changes
console.log(boxes[0]); // has element

const childNodes = document.getElementById('list').childNodes; // live NodeList
console.log(childNodes.length); // 5 (including text nodes)

document.querySelector('#list li').remove(); // lets delete 1st li element

console.log(childNodes.length); // 3 -- live NodeList changed

const inputs = document.getElementsByName('userInput');
console.log(inputs.length); // 2
console.log(inputs.constructor.name); // "NodeList"

document.querySelector('[name="userInput"]').remove(); // lets delete 1st input

console.log(inputs.length); // 1 -- collection chanhed
console.log(inputs[0].value); // other element - not the same

Посилання

https://www.w3schools.com/jsref/dom_obj_html_nodelist.asp
https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp