Dlaczego instrukcje getElementsByClassName JavaScript dostarczają obiekt, który NIE jest tablicą?

Question

Próbuję uzyskać listę w JavaScript (bez użycia jQuery) wszystkich elementów na stronie o określonej nazwie klasy. Dlatego zatrudniamy funkcję getElementsByClassName() w następujący sposób:

var expand_buttons = document.getElementsByClassName('expand'); 
console.log(expand_buttons, expand_buttons.length, expand_buttons[0]); 

Zauważ, że mam trzy elementy kotwiące na mojej stronie z klasą „rozwinąć”. Ten console.log() wyprowadza

[] 0 undefined 

Następnie, dla zabawy, rzuciłam expand_buttons do własnej tablicy następująco:

var newArray = new Array(expand_buttons); 
console.log(newArray, newArray.length); 

to nagle wyjść

[NodeList[3]] 1 

i mogę kliknąć przez nodelistę i zobacz atrybuty trzech elementów kotwicy "rozwiń" na stronie. Warto również zauważyć, że udało mi się uzyskać mój kod działający pod numerem w3schools test page.

Warto również zauważyć, że moje użycie document.getElementsByName faktycznie wyprowadza (do konsoli) tablicę elementów, ale kiedy pytam o jej długość, informuje mnie 0. Podobnie, jeśli próbuję uzyskać dostęp element tablicy używający normalnie, jak zwykle, wypisuje "niezdefiniowany", mimo że wyraźnie jest elementem wewnątrz tablicy, kiedy drukuję obiekt do konsoli.

Czy ktoś ma pojęcie, dlaczego tak się dzieje? Po prostu chcę przechodzić przez elementy DOM i unikam jQuery w tej chwili, ponieważ próbuję ćwiczyć kodowanie przy pomocy wanilii JavaScript.

Dzięki,

ParagonRG

Answer 1

Jest to nie tyle sprawa JavaScript, ponieważ jest to sprawa przeglądarce internetowej. Ten interfejs API jest dostarczany przez obiekt macierzysty (obiekt document), a specyfikacja DOM zwraca obiekt NodeList. Możesz traktować NodeList jak tablicę i jest podobny, ale wyraźnie inny (jak zauważyłeś).

Zawsze można skopiować NodeList do nowej tablicy:

var nodeArr = Array.prototype.slice.call(theNodeList, 0); 

lub w nowoczesnych środowiskach ES2015:

var nodeArr = Array.from(theNodeList); 

JavaScript zawsze istnieje w pewnym kontekście wykonawczym, a kontekst może obejmować wszystkie rodzaje interfejsów API, które zapewniają obsługę kodu JavaScript. Przeglądarka internetowa jest jednym z tych kontekstów. DOM jest określony w sposób, który nie jest szczególnie częsty dla JavaScript; to neutralna językowo definicja interfejsu.

Myślę, że krótka wersja tej odpowiedzi brzmiałaby: "ponieważ tak właśnie jest".

Answer 2

nie zwraca tablicę, ponieważ obiekt jest returns is "live", a konkretnie jest to na żywo NodeList:

W większości przypadków NodeList jest zbiorem żywo. Oznacza to, że zmiany w drzewie DOM zostaną odzwierciedlone w kolekcji.