JavaScript je silný skriptovací jazyk, který dává programátorům možnost vytvářet dynamické, interaktivní webové stránky. Nalezení rodičovského prvku konkrétního prvku je častou operací při práci s objektovým modelem dokumentu (DOM).
Zde se podíváme na různé přístupy založené na JavaScriptu, jak toho dosáhnout.
Nadřazený prvek prvku HTML lze najít pomocí atributu parentNode, což je nejjednodušší metoda. Když je zadán prvek, tento atribut vrátí nadřazený uzel prvku ve stromu DOM. Použití tohoto atributu je ilustrováno následujícím příkladem:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Metoda getElementById se používá ve výše uvedeném fragmentu kódu k výběru podřízeného prvku podle ID. Poté použijeme atribut parentNode k přiřazení rodičovského prvku k proměnné parentElement.
Použití vlastnosti parentElement: DOM nabízí užitečnou vlastnost parentElement, kterou lze kromě vlastnosti parentNode použít k získání nadřazeného prvku prvku HTML. Aplikace je velmi podobná předchozí technice:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Pomocí názornější a srozumitelnější metody můžeme dosáhnout stejného výsledku pomocí atributu parentElement.
Použití metody closest(): Metoda closest() je dalším účinným nástrojem, který nabízejí současné prohlížeče.
Pomocí této techniky můžete určit, který prvek ve stromu selektoru CSS je přímým předkem prvku. Použití techniky next() je demonstrováno v následujícím příkladu:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Poté, co byla k výběru podřízeného prvku použita metoda getElementById, je ve výše uvedeném kódu volána funkce next() a poskytuje selektor CSS jako argument. První předek prvku, který odpovídá zadanému výběru, je vrácen funkcí closest().
V tomto případě se snažíme najít prvek s třídou 'parent-class', který je nejbližším předkem podřízeného prvku.
Použití metod procházení: Strom DOM můžete obejít pomocí jedné z mnoha metod procházení, které JavaScript nabízí. Patří mezi ně metody parentNode, previousSibling, nextSibling, firstChild a lastChild. Kombinací těchto technik můžete přejít na nadřazený prvek konkrétního prvku. Pro ilustraci zvažte následující
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
V tomto řádku kódu nejprve použijeme getElementById k výběru podřízeného prvku a poté použijeme vlastnost parentNode k získání jeho nadřazeného prvku. Tyto techniky procházení vám umožňují procházet stromem DOM nahoru a dolů, abyste našli požadovaný nadřazený nebo podřízený prvek.
Použití vlastnosti parentElement pro zpracování událostí: Při použití obslužných rutin událostí JavaScript může být nutné mít přístup k nadřazenému prvku cíle události. Atribut parentElement v obslužné rutině události lze použít například v případě, že máte seznam tlačítek a chcete provést nějakou akci po kliknutí na tlačítko na nadřazeném prvku.
Zde je ilustrace:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Pomocí querySelectorAll vybereme všechny komponenty ve výše uvedené ukázce kódu, které mají třídu 'button'. Potom má každé tlačítko připojený posluchač události kliknutí pomocí funkce forEach.
Event.target.parentElement používáme k získání přístupu k rodičovskému prvku uvnitř obslužné rutiny události. Výsledkem je, že po kliknutí na tlačítko jsme schopni provést akci s nadřazeným prvkem.
Využití nadřazené vlastnosti prvku s dynamickými prvky:
Pokud ve své webové aplikaci pracujete s dynamicky generovanými prvky, můžete se dostat do situace, kdy potřebujete získat přístup k rodičovskému prvku nově vytvořeného prvku.
Po přidání prvku do DOM můžete za určitých okolností použít rodičovskou vlastnost Element.
Pro ilustraci zvažte následující:
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 řádku kódu nejprve použijeme getElementById k výběru nadřazeného prvku. Poté pomocí funkce appendChild uvnitř funkce createNewElement vytvoříme nový prvek, podle potřeby jej upravíme a přidáme k nadřazenému prvku.
Pomocí vlastnosti parentElement můžeme získat rodičovský prvek nového prvku po jeho přidání do DOM.
co jsou selektory v css
Použití vlastnosti offsetParent:
Za určitých okolností můžete chtít najít prvek, který je nejbližším předkem určitého prvku. Toho lze dosáhnout pomocí vlastnosti offsetParent. Vrátí se nejbližší předchůdce s polohou jinou než statická, což je výchozí umístění.
Zde je ilustrace:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
Ve výše uvedeném úryvku kódu nejprve použijeme metodu getElementById k výběru podřízeného prvku a pak se atribut offsetParent použije k označení prvku předchůdce umístěného nejblíže k proměnné s názvem positionedAcestor.
Použití vlastnosti parentNode s různými typy uzlů:
rozdíl tygří lev
Můžete procházet stromem DOM a dostat se k nadřazenému prvku několika druhů uzlů, jako jsou textové uzly a uzly komentářů, kromě toho, že se dostanete k rodičovskému prvku prvku HTML.
Ve stromu DOM se můžete snadněji pohybovat pomocí vlastnosti parentNode, která funguje s různými typy uzlů. Pro ilustraci zvažte následující:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
V tomto příkladu použijeme funkci createTextNode k vytvoření textového uzlu. Vlastnost parentNode se pak použije k načtení nadřazeného prvku. Při práci se složitými strukturami DOM, které obsahují různé uzly, může být tato strategie užitečná.
Použití vlastnosti parentElement s Shadow DOM:
Pokud pracujete s Shadow DOM, webovou technologií, která umožňuje zapouzdření stromů DOM a stylů CSS, možná budete potřebovat přístup k rodičovskému prvku uvnitř hranice Shadow DOM.
V tomto případě je také použitelná vlastnost parentElement.
Pro ilustraci zvažte následující:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Atribut shadowRoot prvku hostitele se používá ve výše uvedeném kódu k získání kořenového adresáře stínu. Pomocí funkce getElementById pak vybereme podřízený prvek v rámci stínového kořene na základě jeho ID.
Pomocí vlastnosti parentElement můžeme konečně získat rodičovský prvek. To vám umožňuje přistupovat k rodičovskému prvku i uvnitř Shadow DOM.
Umístěné prvky s vlastností offsetParent :
Vlastnost offsetParent ve spojení s vlastnostmi offsetLeft a offsetTop můžete použít k vyhledání nejbližšího umístěného prvku předka daného prvku, pokud to výslovně potřebujete.
Zde je ilustrace:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Pomocí getElementById nejprve vybereme cílový prvek v tomto řádku kódu. Poté se offsetParent cílového prvku použije k inicializaci proměnné positionedAcestor.
Dalším krokem je určit, zda má aktuální umístěný předchůdce vypočítanou polohu 'statická' pomocí smyčky while.
positionedAcestor je aktualizován na offsetParent aktuálního positionedAcestor, pokud ano.
Tento proces pokračuje, dokud nenajdeme předka, který je nejblíže naší aktuální poloze, nebo dokud nedosáhneme vrcholu stromu DOM.
Pomocí těchto extra strategií a metod můžete dále zlepšit svou schopnost načíst nadřazený prvek v JavaScriptu. Tyto metody nabízejí odpovědi na řadu problémů, včetně zpracování Shadow DOM, řešení různých druhů uzlů a lokalizace nejbližšího předka.
Vyberte si techniku, která splní vaše jedinečné požadavky a zlepší vaše dovednosti manipulace s DOM.
Pokud používáte novější metody nebo funkce, nezapomeňte svůj kód důkladně otestovat v různých prohlížečích a ověřit kompatibilitu.
Budete vybaveni znalostmi a schopnostmi pracovat s nadřazenými prvky v JavaScriptu a vytvářet dynamické a interaktivní online zážitky poté, co tyto pojmy pevně pochopíte.
Nyní máte v JavaScriptu k dispozici další metody, jak dosáhnout nadřazeného prvku.
Pochopení těchto technik zlepší vaši schopnost správně modifikovat a interagovat s DOM, ať už pracujete se zpracováním událostí, dynamickými prvky nebo potřebujete objevit nejbližšího předka.
Vždy vyberte přístup, který nejlépe vyhovuje vašemu jedinečnému případu použití, přičemž mějte na paměti kompatibilitu prohlížeče a přesné potřeby vašeho projektu. S těmito metodami, které máte k dispozici, budete vybaveni dovednostmi potřebnými k snadnému prozkoumávání a práci s nadřazenými komponentami v JavaScriptu.