JavaScript to potężny język skryptowy, który daje programistom możliwość tworzenia dynamicznych, interaktywnych witryn internetowych. Znalezienie elementu nadrzędnego określonego elementu jest częstą operacją podczas pracy z obiektowym modelem dokumentu (DOM).
W tym miejscu przyjrzymy się różnym sposobom osiągnięcia tego celu, opartym na języku JavaScript.
Element nadrzędny elementu HTML można znaleźć, korzystając z atrybutu parentNode, co jest najłatwiejszą metodą. Po dostarczeniu elementu ten atrybut zwraca węzeł nadrzędny elementu w drzewie DOM. Użycie tego atrybutu ilustruje następujący przykład:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
W powyższym fragmencie kodu użyto metody getElementById, aby najpierw wybrać element podrzędny według identyfikatora. Następnie używamy atrybutu parentNode, aby przypisać element nadrzędny do zmiennej parentElement.
Korzystanie z właściwości parentElement: DOM oferuje użyteczną właściwość parentElement, której można użyć do uzyskania elementu nadrzędnego elementu HTML oprócz właściwości parentNode. Aplikacja jest bardzo podobna do wcześniejszej techniki:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Dzięki bardziej ilustracyjnej i zrozumiałej metodzie możemy osiągnąć ten sam wynik, używając atrybutu parentElement.
Korzystanie z metody najbliższego(): Metoda najbliższy() to kolejne skuteczne narzędzie oferowane przez współczesne przeglądarki.
Za pomocą tej techniki można określić, który element w drzewie selektora CSS jest bezpośrednim przodkiem elementu. Użycie techniki najbliższego() zademonstrowano w poniższym przykładzie:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Następnie w powyższym kodzie wywoływana jest funkcja najbliższy(), podając selektor CSS jako argument, po użyciu metody getElementById do wybrania elementu podrzędnego. Funkcja najbliższy() zwraca pierwszego przodka elementu pasującego do określonego wyboru.
zmienne globalne js
W tym przypadku staramy się znaleźć element z klasą „klasa-nadrzędna”, który jest najbliższym przodkiem elementu podrzędnego.
Korzystanie z metod przechodzenia: Możesz poruszać się po drzewie DOM, korzystając z jednej z wielu metod przeglądania oferowanych przez JavaScript. Należą do nich metody parentNode, beforeSibling, nextSibling, FirstChild i lastChild. Łącząc te techniki, można przejść do elementu nadrzędnego określonego elementu. Jako ilustrację rozważ następujące kwestie
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
W tym wierszu kodu najpierw używamy metody getElementById do wybrania elementu podrzędnego, a następnie używamy właściwości parentNode w celu uzyskania jego elementu nadrzędnego. Te techniki przechodzenia umożliwiają nawigację w górę i w dół drzewa DOM w celu zlokalizowania wymaganego elementu nadrzędnego lub podrzędnego.
Używanie właściwości parentElement do obsługi zdarzeń: W przypadku korzystania z procedur obsługi zdarzeń JavaScript może być konieczne posiadanie dostępu do elementu nadrzędnego celu zdarzenia. Atrybut parentElement w procedurze obsługi zdarzeń może zostać użyty na przykład, jeśli masz listę przycisków i chcesz wykonać jakąś akcję po kliknięciu przycisku na elemencie nadrzędnym.
Oto ilustracja:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Używając querySelectorAll, wybieramy wszystkie komponenty z powyższego przykładowego kodu, które mają klasę „przycisk”. Następnie do każdego przycisku dołączony jest detektor zdarzeń kliknięcia za pomocą funkcji forEach.
rozmiary czcionek lateksowych
Używamy event.target.parentElement, aby uzyskać dostęp do elementu nadrzędnego wewnątrz procedury obsługi zdarzeń. Dzięki temu po kliknięciu przycisku jesteśmy w stanie podjąć akcję na elemencie nadrzędnym.
Używanie właściwości elementu nadrzędnego z elementami dynamicznymi:
Może się zdarzyć, że będziesz musiał uzyskać dostęp do elementu nadrzędnego nowo utworzonego elementu, jeśli pracujesz z dynamicznie generowanymi elementami w aplikacji internetowej.
Po dodaniu elementu do modelu DOM, w pewnych okolicznościach można użyć nadrzędnej właściwości Element.
Jako ilustrację rozważ następujące kwestie:
const parentElement = document.getElementById('parent-element'); function createNewElement() { const newElement = document.createElement('div'); // Manipulate the new element parentElement.appendChild(newElement); const newElementParent = newElement.parentElement; // Access the parent element of the newly created element } W tym wierszu kodu najpierw używamy getElementById, aby wybrać element nadrzędny. Następnie za pomocą funkcji appendChild znajdującej się wewnątrz funkcji createNewElement tworzymy nowy element, modyfikujemy go w razie potrzeby i dodajemy do elementu nadrzędnego.
Korzystając z właściwości parentElement, możemy pobrać element nadrzędny nowego elementu po dodaniu go do DOM.
Korzystanie z właściwości offsetParent:
W pewnych okolicznościach możesz chcieć znaleźć element będący najbliżej położonym przodkiem określonego elementu. Można to osiągnąć za pomocą właściwości offsetParent. Zwracany jest najbliższy element nadrzędny z pozycją inną niż statyczna, która jest pozycją domyślną.
Oto ilustracja:
aryjski chan
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
We wspomnianym fragmencie kodu najpierw używamy metody getElementById do wybrania elementu podrzędnego, a następnie atrybut offsetParent służy do wyznaczenia elementu przodka znajdującego się najbliżej zmiennej o nazwie positionedAncestor.
Używanie właściwości parentNode z różnymi typami węzłów:
Możesz nawigować po drzewie DOM i dotrzeć do elementu nadrzędnego kilku rodzajów węzłów, takich jak węzły tekstowe i węzły komentarzy, oprócz dotarcia do elementu nadrzędnego elementu HTML.
Możesz łatwiej poruszać się po drzewie DOM, korzystając z właściwości parentNode, która działa z różnymi typami węzłów. Jako ilustrację rozważ następujące kwestie:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
W tym przykładzie używamy funkcji createTextNode do utworzenia węzła tekstowego. Właściwość parentNode jest następnie używana do pobrania elementu nadrzędnego. Strategia ta może być pomocna w przypadku skomplikowanych struktur DOM zawierających różne węzły.
Używanie właściwości parentElement z Shadow DOM:
Jeśli pracujesz z Shadow DOM, technologią sieciową umożliwiającą hermetyzację drzew DOM i stylów CSS, może być konieczne uzyskanie dostępu do elementu nadrzędnego wewnątrz granicy Shadow DOM.
W tym przypadku obowiązuje również właściwość parentElement.
Jako ilustrację rozważ następujące kwestie:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Atrybut ShadowRoot elementu hosta jest używany w powyższym kodzie, aby najpierw uzyskać katalog główny w tle. Korzystając z funkcji getElementById, następnie wybieramy element podrzędny w katalogu głównym cienia na podstawie jego identyfikatora.
Korzystając z właściwości parentElement, możemy w końcu pobrać element nadrzędny. Dzięki temu możesz uzyskać dostęp do elementu nadrzędnego nawet wewnątrz Shadow DOM.
Elementy pozycjonowane z właściwością offsetParent :
Możesz użyć właściwości offsetParent w połączeniu z właściwościami offsetLeft i offsetTop, aby zlokalizować najbliższy element nadrzędny danego elementu, jeśli jest to wyraźnie potrzebne.
Oto ilustracja:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Używając getElementById, najpierw wybieramy element docelowy w tym wierszu kodu. Następnie offsetParent elementu docelowego służy do inicjalizacji zmiennej positionedAncestor.
Następnym krokiem jest określenie, czy bieżący element positionedAncestor ma obliczoną pozycję „statyczną” za pomocą pętli while.
positionedAncestor jest aktualizowany do offsetParent bieżącego positionedAncestor, jeśli tak jest.
Proces ten trwa, dopóki nie zlokalizujemy przodka najbliższego naszej aktualnej lokalizacji lub nie dotrzemy na szczyt drzewa DOM.
Możesz jeszcze bardziej poprawić swoje możliwości odzyskiwania elementu nadrzędnego w JavaScript, korzystając z tych dodatkowych strategii i metod. Metody te oferują odpowiedzi na szereg problemów, w tym obsługę Shadow DOM, radzenie sobie z różnymi rodzajami węzłów i lokalizowanie najbliższego przodka.
Wybierz technikę, która spełnia Twoje unikalne wymagania i poprawia umiejętności manipulacji DOM.
Jeśli używasz nowszych metod lub funkcji, nie zapomnij dokładnie przetestować swojego kodu w różnych przeglądarkach, aby sprawdzić kompatybilność.
kod kodujący Huffmana
Będziesz wyposażony w wiedzę i umiejętności potrzebne do pracy z elementami nadrzędnymi w JavaScript oraz tworzenia dynamicznych i interaktywnych doświadczeń online, gdy już dobrze zrozumiesz te koncepcje.
Masz teraz w JavaScript dostępne dodatkowe metody umożliwiające dotarcie do elementu nadrzędnego.
Zrozumienie tych technik poprawi Twoją zdolność do prawidłowego modyfikowania modelu DOM i interakcji z nim, niezależnie od tego, czy pracujesz z obsługą zdarzeń, elementami dynamicznymi, czy też chcesz odkryć najbliższego przodka.
Zawsze wybieraj podejście, które najlepiej pasuje do Twojego unikalnego przypadku użycia, mając na uwadze kompatybilność przeglądarki i dokładne potrzeby Twojego projektu. Dzięki tym metodom będziesz wyposażony w umiejętności wymagane do łatwego eksplorowania i pracy z komponentami nadrzędnymi w JavaScript.