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.