Uzyskaj wszystkie elementy zawierające klasę z QuerySelector
Istnieje wiele sytuacji, w których programiści muszą wybrać grupę elementów, które mają podobne właściwości. Na przykład, stosując niektóre zbiorowe funkcje na określonych elementach, programiści mogą potrzebować sprawdzić i uzyskać elementy zawierające tę samą nazwę klasy.
Mówiąc dokładniej, pobieranie elementów według nazwy klasy odbywa się przy użyciu metod JavaScript, takich jak „getElementsByClassName () ”,„ querySelector () ”i„ querySelelectionAll ()”Metody. „„QuerySelelect ()”Metoda daje tylko pierwsze dopasowanie danego selektora, podczas gdy „GetElementsByClassName ()” i „querySelectorall ()” Metody zwracają szereg elementów, które pasują do konkretnej nazwy klasy.
Ten samouczek opisuje sposób pobierania wszystkich elementów zawierających tę samą klasę za pomocą QuerySelector.
Jak uzyskać wszystkie elementy zawierające klasę z QuerySelector?
Selektor zapytania daje tylko pierwszą instancję, która pasuje do nazwy klasy. Aby uzyskać wszystkie elementy, skorzystaj z „QuerySelelection ()" metoda. Zwraca grupę wszystkich elementów, które pasują do określonego selektora, takie jak określona nazwa klasy.
Przykład 1: Uzyskaj wszystkie elementy zawierające klasę z metodą QuerySelelect ()
Utwórz przyciski i przypisz „Btn„Klasa do ich stylizowania:
Teraz uzyskaj wszystkie elementy przycisku za pomocą określonej nazwy klasy za pomocą „QuerySelelect ()" metoda:
konsola.dziennik (dokument.querySelector ('.btn '));Wyjście wskazuje, że tylko pierwszy element przycisku został pobrany za pomocą metody QuerySelelect ():
Zobaczmy, co się stanie, gdy spróbujemy stylizować przyciski za pomocą metody QuerySelelect ().
Najpierw przechowuj odniesienia wszystkich przycisków w zmiennej ”przycisk”:
var Button = Dokument.querySelector ('.btn ');Teraz zastosuj kolor tła dla wszystkich przycisków za pomocą „styl" nieruchomość:
przycisk.styl.tło Color = "Gray";Jak widać na wyjściu, kolor jest stosowany tylko na pierwszym przycisku:
Przykład 2: Zdobądź wszystkie elementy zawierające klasę z metodą QuerySelelection ()
„„QuerySelelection ()„Metoda podaje listę elementów pasuje do konkretnego selektora:
konsola.dziennik (dokument.querySelelectionall ('.btn '));Wyjście
Uzyskaj wszystkie przyciski za pomocą „QuerySelelection ()„Metoda, przekazując nazwę klasy, aby je stylizować:
var Button = Dokument.querySelelectionall ('.btn ');Aby uzyskać listę elementów stylizację, użyj podejścia dla pętli, aby iterować każdy węzeł i ustaw kolor tła „szary”:
dla (niech i = 0; i < button.length; i++)przycisk [i].styl.tło Color = "Gray";
Można zauważyć, że wszystkie przyciski zostały pomyślnie stylizowane:
Opracowaliśmy wszystkie istotne informacje związane z uzyskaniem elementów zawierających tę samą klasę z QuerySelector.
Wniosek
Aby uzyskać wszystkie elementy tej samej klasy, skorzystaj z „QuerySelelection ()„Metoda zamiast„QuerySelelect ()". Ponieważ daje tylko pierwszą instancję lub element zawierający określoną nazwę klasy. Ten samouczek opisał sposób odzyskania wszystkich elementów HTML, które posiadają tę samą nazwę klasy.