A nodeto ogólna nazwa dowolnego typu obiektu w hierarchii DOM. Może nodeto być jeden z wbudowanych elementów DOM, takich jak documentlub document.body, może to być znacznik HTML określony w kodzie HTML, takim jak <input>lub, <p>lub może to być węzeł tekstowy, który jest tworzony przez system do przechowywania bloku tekstu w innym elemencie . Krótko mówiąc, a nodejest dowolnym obiektem DOM.
Jest elementto jeden szczególny typ, nodeponieważ istnieje wiele innych typów węzłów (węzły tekstowe, węzły komentarzy, węzły dokumentów itp.).
DOM składa się z hierarchii węzłów, w której każdy węzeł może mieć element nadrzędny, listy węzłów podrzędnych oraz nextSibling i previousSibling. Ta struktura tworzy drzewiastą hierarchię. documentWęzeł będzie mieć swoją listę węzłów podrzędnych (The headwęzłów oraz bodywęzeł). bodyWęzeł będzie mieć swoją listę węzłów podrzędnych (górne elementy poziom twojej strony HTML) i tak dalej.
A nodeListto po prostu lista tablicowa nodes.
Element to określony typ węzła, który można bezpośrednio określić w kodzie HTML za pomocą znacznika HTML i może mieć właściwości takie jak a idlub a class. mogą mieć dzieci itp. Istnieją inne typy węzłów, takie jak węzły komentarzy, węzły tekstowe itp. o różnych właściwościach. Każdy węzeł ma właściwość, .nodeTypektóra informuje, jaki jest typ węzła. Tutaj możesz zobaczyć różne typy węzłów (schemat z MDN ):

Możesz zobaczyć, że ELEMENT_NODEjest to jeden szczególny typ węzła, w którym nodeTypewłaściwość ma wartość 1.
document.getElementById("test")Może więc zwrócić tylko jeden węzeł i na pewno jest to element (określony typ węzła). Z tego powodu zwraca element, a nie listę.
Ponieważ document.getElementsByClassName("para")może zwrócić więcej niż jeden obiekt, projektanci postanowili zwrócić a, nodeListponieważ jest to typ danych, który utworzyli dla listy więcej niż jednego węzła. Ponieważ mogą to być tylko elementy (tylko elementy zwykle mają nazwę klasy), technicznie jest to, nodeListże zawiera tylko węzły elementu typu, a projektanci mogli stworzyć kolekcję o innej nazwie elementList, ale zdecydowali się użyć tylko jednego typu kolekcji, czy miał w niej tylko elementy, czy nie.
EDYCJA: HTML5 definiuje HTMLCollectionktóra jest listą elementów HTML (nie żadnego węzła, tylko elementy). Szereg właściwości lub metod w HTML5 teraz zwraca an HTMLCollection. Chociaż jest bardzo podobny w interfejsie do a nodeList, teraz wprowadza się rozróżnienie, ponieważ zawiera tylko elementy, a nie dowolny typ węzła.
Rozróżnienie między a nodeListi a HTMLCollectionma niewielki wpływ na to, jak go używasz (o ile wiem), ale projektanci HTML5 wprowadzili to rozróżnienie.
Na przykład element.childrenwłaściwość zwraca aktywną kolekcję HTMLCollection.