JavaScript je výkonný skriptovací jazyk, ktorý dáva programátorom možnosť vytvárať dynamické, interaktívne webové stránky. Nájdenie rodičovského prvku konkrétneho prvku je častou operáciou pri práci s modelom objektu dokumentu (DOM).
Tu sa pozrieme na rôzne prístupy založené na JavaScripte, ako to dosiahnuť.
Nadradený prvok prvku HTML možno nájsť pomocou atribútu parentNode, čo je najjednoduchšia metóda. Keď je zadaný prvok, tento atribút vráti rodičovský uzol prvku v strome DOM. Použitie tohto atribútu je ilustrované nasledujúcim príkladom:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Metóda getElementById sa používa v útržku kódu vyššie na výber podriadeného prvku podľa ID. Potom použijeme atribút parentNode na priradenie rodičovského prvku k premennej parentElement.
Použitie vlastnosti parentElement: DOM ponúka užitočnú vlastnosť parentElement, ktorá sa môže použiť na získanie rodičovského prvku prvku HTML okrem vlastnosti parentNode. Aplikácia je veľmi podobná predchádzajúcej technike:
java znak na int
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Pomocou názornejšej a zrozumiteľnejšej metódy môžeme dosiahnuť rovnaký výsledok pomocou atribútu parentElement.
Použitie metódy closest(): Metóda closest() je ďalším efektívnym nástrojom, ktorý ponúkajú súčasné prehliadače.
Pomocou tejto techniky môžete určiť, ktorý prvok v strome selektora CSS je priamym predchodcom prvku. Použitie techniky next() je demonštrované v nasledujúcom príklade:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Po použití metódy getElementById na výber podradeného prvku sa potom vo vyššie uvedenom kóde zavolá funkcia next() a poskytne selektor CSS ako argument. Prvý predok prvku, ktorý zodpovedá zadanému výberu, je vrátený funkciou closest().
V tomto prípade sa snažíme nájsť prvok s triedou 'parent-class', ktorý je najbližším predkom podradeného prvku.
Použitie metód prechodu: Strom DOM môžete obísť pomocou jednej z mnohých metód prechodu, ktoré JavaScript ponúka. Patria medzi ne metódy parentNode, previousSibling, nextSibling, firstChild a lastChild. Kombináciou týchto techník môžete prejsť na nadradený prvok konkrétneho prvku. Ako ilustráciu zvážte nasledujúce
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
V tomto riadku kódu najprv použijeme getElementById na výber podradeného prvku a potom použijeme vlastnosť parentNode na získanie jeho nadradeného prvku. Tieto techniky prechodu vám umožňujú prechádzať nahor a nadol v strome DOM, aby ste našli požadovaný nadradený alebo podradený prvok.
Použitie vlastnosti parentElement na spracovanie udalostí: Pri používaní obslužných programov udalostí JavaScript môže byť potrebné mať prístup k rodičovskému prvku cieľa udalosti. Atribút parentElement v obslužnom programe udalosti možno použiť napríklad vtedy, ak máte zoznam tlačidiel a chcete vykonať nejakú akciu po kliknutí na tlačidlo na nadradenom prvku.
Tu je ilustrácia:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Pomocou querySelectorAll vyberieme všetky komponenty vo vyššie uvedenej ukážke kódu, ktoré majú triedu 'tlačidlo'. Potom má každé tlačidlo pripojený prijímač udalosti kliknutia pomocou funkcie forEach.
Event.target.parentElement používame na získanie prístupu k rodičovskému prvku vo vnútri obsluhy udalosti. Výsledkom je, že po kliknutí na tlačidlo sme schopní vykonať akciu s nadradeným prvkom.
Využitie nadradenej vlastnosti prvku s dynamickými prvkami:
Ak vo svojej webovej aplikácii pracujete s dynamicky generovanými prvkami, môžete sa dostať do situácie, kedy potrebujete získať prístup k rodičovskému prvku novovytvoreného prvku.
Po pridaní prvku do DOM môžete za určitých okolností použiť rodičovskú vlastnosť Element.
Pre ilustráciu zvážte nasledovné:
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 } V tomto riadku kódu najprv použijeme getElementById na výber nadradeného prvku. Potom pomocou funkcie appendChild vo funkcii createNewElement vytvoríme nový prvok, podľa potreby ho upravíme a pridáme do nadradeného prvku.
Pomocou vlastnosti parentElement môžeme získať rodičovský prvok nového prvku po jeho pridaní do DOM.
Použitie vlastnosti offsetParent:
príkaz javascript if
Za určitých okolností možno budete chcieť nájsť prvok, ktorý je najbližším predkom konkrétneho prvku. Môžete to dosiahnuť pomocou vlastnosti offsetParent. Vráti sa najbližší prvok predchodcu s inou než statickou pozíciou, čo je predvolené umiestnenie.
Tu je ilustrácia:
java číslo na reťazec
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
Vo vyššie uvedenom úryvku kódu najskôr použijeme metódu getElementById na výber podradeného prvku a potom sa atribút offsetParent použije na označenie prvku predka, ktorý je najbližšie k premennej s názvom positionedAcestor.
Použitie vlastnosti parentNode s rôznymi typmi uzlov:
Môžete sa pohybovať v strome DOM a dostať sa k rodičovi niekoľkých druhov uzlov, ako sú textové uzly a uzly komentárov, okrem toho, že sa dostanete k rodičovskému prvku prvku HTML.
V strome DOM sa môžete ľahšie pohybovať pomocou vlastnosti parentNode, ktorá funguje s rôznymi typmi uzlov. Pre ilustráciu zvážte nasledovné:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
V tomto príklade používame funkciu createTextNode na vytvorenie textového uzla. Vlastnosť parentNode sa potom použije na získanie rodičovského prvku. Pri riešení zložitých štruktúr DOM, ktoré obsahujú rôzne uzly, môže byť táto stratégia užitočná.
Použitie vlastnosti parentElement s Shadow DOM:
Ak pracujete s Shadow DOM, webovou technológiou, ktorá umožňuje zapuzdrenie stromov DOM a štýlov CSS, možno budete musieť získať prístup k rodičovskému prvku v rámci hranice Shadow DOM.
V tomto prípade je tiež použiteľná vlastnosť parentElement.
Pre ilustráciu zvážte nasledovné:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Atribút shadowRoot prvku hostiteľa sa používa v kóde vyššie na získanie koreňového adresára tieňa. Pomocou funkcie getElementById potom vyberieme podradený prvok v rámci tieňového koreňa na základe jeho ID.
Pomocou vlastnosti parentElement môžeme konečne získať rodičovský prvok. To vám umožňuje pristupovať k rodičovskému prvku aj v rámci Shadow DOM.
Umiestnené prvky s vlastnosťou offsetParent :
Vlastnosť offsetParent môžete použiť v spojení s vlastnosťami offsetLeft a offsetTop na vyhľadanie najbližšieho umiestneného prvku predka daného prvku, ak to výslovne potrebujete.
rodič jquery
Tu je ilustrácia:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Pomocou getElementById najprv vyberieme cieľový prvok v tomto riadku kódu. Potom sa offsetParent cieľového prvku použije na inicializáciu premennej positionedAcestor.
Ďalším krokom je určiť, či má aktuálne umiestnený predok vypočítanú polohu „statickú“ pomocou cyklu while.
positionedAcestor sa aktualizuje na offsetParent aktuálneho positionedAcestor, ak áno.
Tento proces pokračuje, kým nenájdeme predka, ktorý je najbližšie k našej aktuálnej polohe, alebo kým nedosiahneme vrchol stromu DOM.
Pomocou týchto extra stratégií a metód môžete ďalej zlepšiť svoju schopnosť získať nadradený prvok v jazyku JavaScript. Tieto metódy ponúkajú odpovede na celý rad problémov, vrátane spracovania Shadow DOM, riešenia rôznych druhov uzlov a lokalizácie najbližšieho predka.
Vyberte si techniku, ktorá spĺňa vaše jedinečné požiadavky a zlepšuje vaše zručnosti pri manipulácii s DOM.
Ak používate novšie metódy alebo funkcie, nezabudnite svoj kód dôkladne otestovať v rôznych prehliadačoch, aby ste si overili kompatibilitu.
Budete vybavení znalosťami a schopnosťami pracovať s nadradenými prvkami v JavaScripte a budovať dynamické a interaktívne online zážitky potom, čo tieto pojmy pevne pochopíte.
Teraz máte v JavaScripte k dispozícii ďalšie metódy na dosiahnutie nadradeného prvku.
Pochopenie týchto techník zlepší vašu schopnosť správne modifikovať a interagovať s DOM, či už pracujete so spracovaním udalostí, dynamickými prvkami, alebo potrebujete objaviť najbližšieho umiestneného predka.
Vždy si vyberte prístup, ktorý najlepšie vyhovuje vášmu jedinečnému prípadu použitia, pričom pamätajte na kompatibilitu prehliadača a presné potreby vášho projektu. S týmito metódami, ktoré máte k dispozícii, budete vybavení zručnosťami potrebnými na ľahké skúmanie a prácu s nadradenými komponentmi v JavaScripte.