Pobierz elementy dziecięce według nazwy znacznika za pomocą JavaScript
Podczas programowania w JavaScript może istnieć wiele elementów w stosunku do tej samej nazwy znacznika, które należy pobrać, aby wykonać określoną funkcjonalność. Elementy te można wykorzystać do powiązania elementów rodziców i dzieci. W takich scenariuszach uzyskanie elementów dziecięcych według nazwy znacznika za pomocą JavaScript jest bardzo pomocne w uproszczeniu złożoności kodu i zapewnieniu użyteczności użytkownikowi końcowi.
Ten samouczek wyjaśni podejścia do uzyskania elementów dziecka według nazwy znacznika w JavaScript.
Jak uzyskać elementy dziecięce za pomocą nazwy znacznika w JavaScript?
Aby uzyskać elementy dziecięce według nazwy znacznika w JavaScript, zastosuj następujące metody:
- "QuerySelelectall () ”
- "getElementById ()" I "getElementsBaTagname ()”Metody.
Metoda 1: Zdobądź elementy dziecięce według nazwy znacznika w JavaScript za pomocą metody QuerySelelection ()
„„QuerySelelection ()”Metoda pobiera wszystkie elementy pasujące do selektora (-ów) CSS i zwraca listę węzłów. Tę metodę można zastosować, aby uzyskać odpowiednie elementy dziecka, odnosząc się do „ID”Elementu nadrzędnego i nazwy znacznika elementów dziecięcych za jednym razem.
Składnia
dokument.querySelelectionAll (selektory)
W podanej składni:
- "Selektory”Odpowiada jednego lub więcej niż jednego selektora CSS.
Przykład
Sprawdźmy następujący przykład:
To jest obraz
W powyższym fragmencie kodu:
- Zawierać "div„Element o podaniu„ID".
- Dodaj także nagłówek i obraz jako „dziecko”Odpowiednio elementy.
- W kodzie JavaScript uzyskaj dostęp do „div„Element (rodzic) przez„ID”Oraz nagłówek (dziecko) i obraz (dziecko) przez„etykietka" nazwa.
- To zwróci elementy dziecięce pobierane przez nazwy tagów w ostatnim kroku.
Wyjście
Powyższe dane wyjściowe oznacza, że elementy dziecięce są pomyślnie pobierane. Przejdźmy do następnego podejścia do osiągnięcia tej samej funkcjonalności.
Metoda 2: Zdobądź elementy dziecięce według nazwy znacznika w JavaScript za pomocą metod GetElementById () i GetElementsByTagName ()
„„getElementById ()”Metoda daje element o odpowiedni identyfikator i„getElementsBaTagname ()”Metoda zwraca zbiór wszystkich elementów o nazwie tagu. Metody te można również zaimplementować, aby pobrać element nadrzędny według jego identyfikatora i elementów dziecięcych według nazwy znacznika. Ale tutaj wymagane są osobne metody do osobnego wykonywania określonej funkcjonalności.
Składnia
dokument.getElementById (id)
W powyższej składni:
- "ID„Wskazuje na związany z nim element”ID"
dokument.getElementsByTagname (tag)
W dostarczonej składni:
- "etykietka”Reprezentuje nazwę znacznika elementu.
Przykład
Przejdźmy do następującego przykładu:
Nazwa Wiek Miasto Złupić 25 Los Angeles
Zastosuj następujące kroki podane w powyższym kodzie:
- Określić "tabela„Element (rodzic) o określonym„ID".
- Następnie dodaj „Dane tabeli"
element o określonych danych w ramach „Rząd stołowy" element. - W kodzie JavaScript, po pierwsze, pobieraj element nadrzędny według jego identyfikatora za pomocą „getElementById ()" metoda.
- Uzyskaj również dostęp do elementu dziecięcego według nazwy znacznika za pomocą „getElementsBaTagname ()„Metoda jednocześnie.
- Spowoduje to przyniesienie wszystkich elementów dziecka odpowiadających określonej nazwie znacznika.
Wyjście
Na powyższym wyjściu można zaobserwować, że wszystkie „TD„Elementy dziecięce w tabeli (rodzic) są pomyślnie pobierane.
Wniosek
„„QuerySelelection ()„Metoda,„getElementById ()", albo "getElementsBaTagname ()”Metody można wykorzystać do uzyskania elementów dziecięcych według nazwy znacznika za pomocą JavaScript. Pierwszą metodę można zastosować, aby uzyskać dostęp do elementu nadrzędnego według jego identyfikatora i elementów dziecięcych według ich nazw tagów osobno. Te ostatnie metody można wdrożyć, aby uzyskać identyfikator elementu nadrzędnego i nazwy znaczników elementów dziecięcych przy użyciu osobnych metod dla każdej funkcji. Ten blog wykazał, że przynosi elementy dziecięce według nazwy tagu w JavaScript.