Próbowałem użyć let modal = document.getElementsByClassName('modal'), aby wybrać element z klasą {X1}}. Pracowałem tylko po użyciu wyboru węzła, aby wybrać pierwszy wynik: let modal = document.getElementsByClassName('modal')[0]. Znam metodę Document.getElementsByClassName() zwraca elementy dziecka, które mają wszystkie podane nazwy klas, ale jest tylko jeden element w moim HTML z tą klasą. Potwierdziłem to w moich narzędziach Deververa za pomocą var x = document.getElementsByClassName('modal').length i rejestrując wartość x do konsoli (zwróconą 1 zgodnie z oczekiwaniami). Czy ktoś może wyjaśnić, dlaczego wybór węzła jest potrzebny w tym przypadku?

W przypadku, gdy jest coś w moim kodzie, oto mój Codepen.

Edytuj: Moje pytanie jest inne niż zaznaczone jako duplikat. W tym pytaniu pytają różnicę między metodami niż zwrócić pojedynczy element i te, które zwracają kolekcję elementów podobnych do tablicy. Jestem już świadomy getElementsByClassName Zwraca kolekcję elementów podobnych do tablicy, podczas gdy inne metody zwracają jeden element. Moje pytanie jest dlaczego potrzebujesz określić indeks w przypadku zwracania wszystkich elementów klasy, ale jest tylko jeden element z klasą (więc jeden element, poprawny element, zostanie zwrócony).

3
NattyC 4 czerwiec 2018, 01:54

3 odpowiedzi

Najlepsza odpowiedź

document.getElementsByClassName zwróci listę Elementy z podaną nazwą klasy. Nawet jeśli jest tylko jeden element z nazwą klasy, będzie na liście węzła, dlatego musisz użyć [0]

6
TheJim01 3 czerwiec 2018, 22:59

Jest to potrzebne, ponieważ GetEletySBlassName zwraca HTMLCollection, a nie pojedynczy element.

Aby uzyskać przedmiot bez użycia {x0}}, użyj Zapytaj selektor, da ci to element zamiast zbiór przedmiotów.

let modal = document.querySelector('.modal')
console.log(modal)
2
Get Off My Lawn 3 czerwiec 2018, 22:59
document.getElementsByClassName

Zwróci tablicę elementu, który ma tę klasę

0
Pouya Demokri 3 czerwiec 2018, 22:59