A node- це загальна назва для будь-якого типу об'єктів в ієрархії DOM. A nodeможе бути одним із вбудованих елементів DOM, таких як, documentабо document.body, це може бути тег HTML, вказаний у HTML, наприклад, <input>або, <p>або це може бути текстовий вузол, який створюється системою, щоб утримувати блок тексту всередині іншого елемента . Отже, у двох словах, a node- це будь-який об’єкт DOM.
Це elementодин конкретний тип, nodeоскільки існує багато інших типів вузлів (текстові вузли, вузли коментарів, вузли документів тощо).
DOM складається з ієрархії вузлів, де кожен вузол може мати батьківську, списку дочірніх вузлів та nextSibling та попередньогоSibling. Ця структура утворює деревоподібну ієрархію. documentВузол матиме свій список дочірніх вузлів ( headвузли та bodyвузли). bodyВузол матиме свій список дочірніх вузлів (елементи верхнього рівня у вашій HTML сторінці) і так далі.
Отже, a nodeList- це просто схожий на масив список nodes.
Елемент - це певний тип вузла, той, який можна безпосередньо вказати в HTML за допомогою тегу HTML і може мати властивості, такі як a idабо a class. можуть мати дітей тощо ... Є й інші типи вузлів, такі як вузли коментарів, текстові вузли тощо ... з різними характеристиками. Кожен вузол має властивість, .nodeTypeяка повідомляє про тип вузла. Тут ви можете побачити різні типи вузлів (схема від MDN ):

Ви можете бачити, що ELEMENT_NODEце один конкретний тип вузла, де nodeTypeвластивість має значення 1.
Таким чином, document.getElementById("test")можна повернути лише один вузол, і він гарантовано буде елементом (певний тип вузла). Через це він просто повертає елемент, а не список.
Оскільки document.getElementsByClassName("para")може повернути більше одного об'єкта, дизайнери вирішили повернути a, nodeListоскільки це тип даних, який вони створили для списку більш ніж одного вузла. Оскільки це можуть бути лише елементи (лише елементи, як правило, мають назву класу), технічно це nodeListлише те , що в ньому є лише вузли типу елемента, і дизайнери могли скласти колекцію з іншим іменем, яка була elementList, але вони вирішили використовувати лише один тип колекції, в ній були лише елементи чи ні.
EDIT: HTML5 визначає HTMLCollectionперелік елементів HTML (не будь-який вузол, лише Elements). Кілька властивостей або методів у HTML5 тепер повертають HTMLCollection. Незважаючи на те, що він дуже схожий по інтерфейсу з a nodeList, тепер робиться відмінність у тому, що він містить лише елементи, а не будь-який тип вузла.
Відмінність між a nodeListі an HTMLCollectionмало впливає на те, як ви використовуєте його (наскільки я можу сказати), але дизайнери HTML5 тепер зробили це розмежування.
Наприклад, element.childrenвластивість повертає живий HTMLCollection.