Pobierz atrybut węzła nadrzędnego za pomocą JavaScript

Podczas radzenia sobie ze złożonymi kodami często istnieje wymaganie dostępu do atrybutów określonego węzła nadrzędnego w stosunku do wielu węzłów dziecięcych w celu zastosowania jego funkcji. W takim przypadku wykorzystanie atrybutów ustawionych staje się wygodne, a nie przypisywanie ich wielokrotnym. Ponadto uzyskanie atrybutu węzła nadrzędnego za pomocą JavaScript pomaga w uczynieniu dostępu dostępu i efektywnym wykorzystaniu przypisanych atrybutów.

W tym samouczku omówi podejścia do uzyskania atrybutu węzła nadrzędnego za pomocą JavaScript.

Jak uzyskać atrybut węzła nadrzędnego za pomocą JavaScript?

Atrybut węzła nadrzędnego można pobrać w JavaScript za pomocą następujących podejść:

• "Parenement„Nieruchomość z„getAttribute ()" metoda.
• "najbliższy()" I "getAttribute ()”Metody.
• "JQuery”Metody.

Podejście 1: Zdobądź atrybut węzła nadrzędnego w JavaScript za pomocą właściwości Paretellement za pomocą metody getAttribute ()

„„Parenement”Właściwość podaje element nadrzędny powiązanego elementu. Natomiast "getAttribute ()”Metoda zwraca wartość atrybutu elementu. Metody te można zastosować w połączeniu, aby uzyskać dostęp do węzła dziecięcego i uzyskać konkretny atrybut węzła nadrzędnego, odnosząc się do węzła dziecięcego.

Składnia

element.getAttribute (nazwa)

W powyższej składni:

"nazwa”Wskazuje na nazwę atrybutu.

Przykład
Przeglądmy następujący przykład:

To jest strona internetowa Linuxhint

W powyższym fragmencie kodu:

• Po pierwsze, dołącz „„Element o podaniu„ID„Który będzie uważany za„rodzic„Węzeł.
• W następnym kroku określ „

  „Element o określonym„ID”, Który będzie traktowany jako„dziecko„Węzeł.

• W kodzie JS uzyskaj dostęp do węzła dziecięcego przez „ID" za pośrednictwem "getElementById ()" metoda.
• Następnie skojarz „Parenement„Własność i„ „getAttribute ()”Metody pobieranego węzła dziecięcego.
• Spowoduje to przyniesienie określonego atrybutu węzła nadrzędnego, odnosząc się do węzła dziecięcego.

Wyjście

W powyższym wyjściu można zaobserwować, że odnosząc się do „id” węzła nadrzędnego, wyświetlany jest odpowiedni atrybut zestawu.

Podejście 2: Zdobądź atrybut węzła nadrzędnego w metodach JavaScript za pomocą metod najbliższych () i getAttribute ()

„„najbliższy()”Metoda przeszukuje elementy w drzewie DOM pasującym do określonego selektora CSS. Tę metodę można wdrożyć w połączeniu z „getAttribute ()„Metoda wyszukiwania najbliższego elementu konkretnego elementu dziecka i pobierania jego atrybutu (węzeł nadrzędnego).

Składnia

element.najbliższe (selektory)

W powyższej składni:

"Selektory”Odpowiadają jednemu lub więcej niż jednemu selektorom CSS.

Przykład
Przejdźmy do następującego przykładu:

To jest obraz

Zastosuj następujące kroki podane w powyższych wierszach kodu:

• Podobnie, uwzględnij węzeł nadrzędny i dwa węzły dziecięce o podaniu „IDS”Odpowiednio.
• W kodzie JavaScript uzyskaj dostęp do węzłów dziecięcych, jak omówiono, za pomocą „getElementById ()" metoda.
• W następnym kroku zastosuj „najbliższy()„Metoda odnosząca się do„ID”Elementu nadrzędnego. Spowoduje to uzyskanie dostępu do najbliższego elementu o podanym identyfikatorze.
• Zastosuj także „getAttribute ()„Metoda pobierania określonego„atrybut”Dostępnego elementu nadrzędnego w poprzednim kroku.
• Na koniec wyświetl atrybut odpowiedniego węzła nadrzędnego.

Wyjście

Z powyższego wyjścia widać, że atrybut węzła nadrzędnego „styl”Jest pobrane.

Podejście 3: Zdobądź atrybut węzła nadrzędnego w JavaScript przy użyciu metod jQuery

Takie podejście można zastosować w celu bezpośredniego dostępu do węzła dziecięcego i dostępu do atrybutu węzła nadrzędnego, odwołując się do niego osobnymi metodami.

Przykład
Poniższy przykład ilustruje podaną koncepcję:

W powyższym kodzie:

• Zawierać "JQuery„Biblioteka do zastosowania swoich metod.
• Następnie podaj również węzeł nadrzędny i dziecięcy. Wejście „tekst„Pole tutaj będzie działać jako„dziecko„Węzeł.
• W kodzie JS uzyskaj dostęp do elementu dziecięcego, i.mi., Wejście pole tekstowe. „„rodzic()”I„ „attr ()”Metody zlokalizują określony atrybut w elemencie nadrzędnym i wyświetli go za pomocą alertu.

Wyjście

Powyższe dane wyjściowe oznacza, że ​​osiągnięto pożądane wymaganie.

Wniosek

Właściwość rodzicielska z metodą getAttribute () może przekierować do węzła nadrzędnego i pobierać jej konkretny atrybut. Metody najbliższych () i getAttribute () mogą pobierać najbliższy element w odniesieniu do powiązanego elementu dziecka i pobierać jego atrybut. Podczas gdy metody jQuery mogą uzyskać dostęp do węzła dziecięcego bezpośrednio i używać osobnych metod dla każdej funkcji do wykonania pożądanego wymagania. Ten blog wyjaśnia, jak uzyskać atrybut węzła nadrzędnego w JavaScript.