Czy istnieje sposób na wybranie węzła rodzeństwa?

Podczas integracji różnych funkcji na stronie internetowej może istnieć wymóg powiązania ich w celu zdefiniowania ich celu. Na przykład powiązanie tych samych elementów daje użytkownikowi jasne zrozumienie. W takich sytuacjach wybór węzłów rodzeństwa w JavaScript pomaga w uproszczeniu złożoności kodu, tym samym skutecznie wykorzystując bieżące zasoby.

Ten blog omówi podejścia do wyboru węzłów rodzeństwa w JavaScript.

Czy istnieje sposób na wybranie węzła rodzeństwa w JavaScript?

Tak! Aby wybrać węzeł rodzeństwa w JavaScript, zastosuj następujące podejścia:

• "ParentNode”Własność i„rozpowszechnianie się(… )„Operator
• "NextElementsIbling" nieruchomość

Metoda 1: Wybór węzłów rodzeństwa w JavaScript za pomocą właściwości nadrzędnej i operatora spread (…)

„„ParentNode„Właściwość podaje węzeł nadrzędny elementu. Ta właściwość można zastosować w połączeniu z „Operator rozprzestrzeniania się (…)„Aby uzyskać dostęp do węzła nadrzędnego pobieranego elementu i zwrócić jego węzły rodzeńskie.

Przykład
Rozumiemy praktycznie określoną koncepcję:

Niedziela

Html

Poniedziałek

CSS

JavaScript

Wtorek

Środa

JQuery

const myday = dokument.getElementById („dni”).ParentNode.QuerySelelectionall („H5”);
konsola.Log („Węzły rodzeńskie to:”, [… myday].mapa (e => e.innertext));

W powyższym bloku kodu:

• Określić "„Element jako węzeł nadrzędny z„ID" I "styl”Jako jego atrybuty.
• Uwzględnij także „

  " I "

  „Elementy mające podane identyfikatory.

• W kodzie JS uzyskaj dostęp do „

  ”Element za pośrednictwem„getElementById ()" metoda.

• Zastosuj także „ParentNode”Własność i„QuerySelelection ()„Metoda w połączeniu w celu uzyskania dostępu do węzła nadrzędnego pobieranego elementu i zwrócenia całego jego (

  ) Węzły rodzeńskie.

• Na koniec zastosuj połączone „Operator rozprzestrzeniania się (…)" I "mapa()„Metody przechowywania wyniku poprzedniego kroku w innej tablicy.

Wyjście

W powyższym wyjściu można zauważyć, że wszystkie węzły rodzeńskie „”

" są wyświetlane.

Metoda 2: Wybierz węzeł rodzeństwa z właściwością NextElementsIbling za pomocą JavaScript

„„QuerySelelect ()”Metoda wyprowadza pierwszy element pasujący do selektora CSS i„NextElementsIbling”Właściwość zwraca następny element na podobnym poziomie drzewa. W połączeniu podejścia te można zaimplementować, aby uzyskać dostęp do określonego elementu i zwrócić jego bezpośredni węzeł rodzeństwa.

Składnia

węzeł.NextElementsIbling

W powyższej składni zwróci się następne rodzeństwo powiązanego węzła.

Przeglądajmy poniżej podany przykład:

Radio

Oglądać

Telewizja

Elektryczność

Komputer

mobilny

const current = dokument.querySelector ('.aktualny');
const NextSibling = prąd.NextElementsIbling;
konsola.log („węzeł rodzeństwa to:”, NextSibling);

W powyższym fragmencie kodu:

• Zawierać "„Element i uzasadnij to”Centrum".
• Następnie określ „

  „Elementy zachowujące się jak węzły rodzeńskie.

• Podaj także określony element przydzielony „klasa".
• W części kodu JavaScript uzyskaj dostęp do konkretnego węzła określonego przez klasę za pomocą „QuerySelelect ()" metoda.
• W następnym kroku zastosuj „NextElementsIbling„Własność, aby zwrócić bezpośrednie rodzeństwo w odniesieniu do pobieranego elementu.
• Na koniec wyświetl odpowiedni węzeł rodzeństwa.

Wyjście

Powyższe dane wyjściowe oznacza, że ​​odpowiedni węzeł rodzeństwa został pomyślnie pobrany.

Wniosek

Aby wybrać węzeł rodzeństwa w JavaScript, zastosuj połączony „ParentNode”Własność i„rozpowszechnianie się(… )„Operator lub„NextElementsIbling" nieruchomość. Pierwsze podejście uzyskuje dostęp do węzła nadrzędnego pobieranego elementu i zwraca węzły rodzeńskie. To ostatnie podejście daje następne rodzeństwo w stosunku do dostępnego węzła. Ten blog wyjaśnił podejścia do wyboru węzłów rodzeństwa w JavaScript.