JavaScript ist eine leistungsstarke Skriptsprache, die Programmierern die Möglichkeit gibt, dynamische, interaktive Websites zu erstellen. Das Finden des übergeordneten Elements eines bestimmten Elements ist ein häufiger Vorgang bei der Arbeit mit dem Document Object Model (DOM).
Hier sehen wir uns verschiedene JavaScript-basierte Ansätze an, um dies zu erreichen.
Das übergeordnete Element eines HTML-Elements kann mithilfe des parentNode-Attributs gefunden werden, was die einfachste Methode ist. Wenn ein Element bereitgestellt wird, gibt dieses Attribut den übergeordneten Knoten des Elements im DOM-Baum zurück. Die Verwendung dieses Attributs wird durch das folgende Beispiel veranschaulicht:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
Die getElementById-Methode wird im obigen Codeausschnitt verwendet, um zunächst das untergeordnete Element anhand der ID auszuwählen. Danach verwenden wir das Attribut parentNode, um das übergeordnete Element der Variablen parentElement zuzuweisen.
Verwenden der parentElement-Eigenschaft: Das DOM bietet eine nützliche parentElement-Eigenschaft, die zusätzlich zur parentNode-Eigenschaft verwendet werden kann, um das übergeordnete Element eines HTML-Elements abzurufen. Die Anwendung ist der früheren Technik sehr ähnlich:
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement;
Mit einer anschaulicheren und verständlicheren Methode können wir das gleiche Ergebnis erzielen, indem wir das parentElement-Attribut verwenden.
Verwendung der Methode „nest()“: Die Methode „nest()“ ist ein weiteres effektives Tool, das moderne Browser bieten.
Mithilfe dieser Technik können Sie bestimmen, welches Element im Baum eines CSS-Selektors der direkte Vorfahre eines Elements ist. Die Verwendung der next()-Technik wird im folgenden Beispiel demonstriert:
const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class');
Anschließend wird im obigen Code die Funktion „nearest()“ aufgerufen, die einen CSS-Selektor als Argument bereitstellt, nachdem die Methode „getElementById“ zum Auswählen des untergeordneten Elements verwendet wurde. Der erste Vorfahre des Elements, das der angegebenen Auswahl entspricht, wird von der Funktion close() zurückgegeben.
In diesem Fall versuchen wir das Element mit der Klasse „parent-class“, das der nächste Vorfahre des untergeordneten Elements ist, zu finden.
Verwendung von Traversal-Methoden: Sie können den DOM-Baum mit einer der vielen Traversal-Methoden umgehen, die JavaScript bietet. Dazu gehören die Methoden parentNode, previousSibling, nextSibling, firstChild und lastChild. Sie können zum übergeordneten Element eines bestimmten Elements wechseln, indem Sie diese Techniken kombinieren. Betrachten Sie zur Veranschaulichung Folgendes
const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode;
In dieser Codezeile verwenden wir zunächst getElementById, um das untergeordnete Element auszuwählen, und verwenden dann die Eigenschaft parentNode, um sein übergeordnetes Element abzurufen. Mit diesen Durchlauftechniken können Sie im DOM-Baum nach oben und unten navigieren, um das erforderliche übergeordnete oder untergeordnete Element zu finden.
Verwenden der parentElement-Eigenschaft für die Ereignisbehandlung: Bei der Verwendung von JavaScript-Ereignishandlern kann es erforderlich sein, Zugriff auf das übergeordnete Element des Ereignisziels zu haben. Das parentElement-Attribut im Ereignishandler kann beispielsweise verwendet werden, wenn Sie über eine Liste mit Schaltflächen verfügen und eine Aktion ausführen möchten, wenn auf eine Schaltfläche im übergeordneten Element geklickt wird.
Hier ist eine Illustration:
const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); Mit querySelectorAll wählen wir im obigen Codebeispiel alle Komponenten aus, die die Klasse „button“ haben. Anschließend ist an jede Schaltfläche mithilfe der Funktion „forEach“ ein Klickereignis-Listener angehängt.
Wir verwenden event.target.parentElement, um Zugriff auf das übergeordnete Element innerhalb des Event-Handlers zu erhalten. Dadurch können wir beim Klicken auf die Schaltfläche Maßnahmen für das übergeordnete Element ergreifen.
Verwendung der übergeordneten Elementeigenschaft mit dynamischen Elementen:
Es kann vorkommen, dass Sie auf das übergeordnete Element eines neu gebildeten Elements zugreifen müssen, wenn Sie in Ihrer Webanwendung mit dynamisch generierten Elementen arbeiten.
Nachdem Sie das Element zum DOM hinzugefügt haben, können Sie unter bestimmten Umständen die übergeordnete Elementeigenschaft verwenden.
Betrachten Sie zur Veranschaulichung Folgendes:
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 } In dieser Codezeile verwenden wir zunächst getElementById, um das übergeordnete Element auszuwählen. Dann erstellen wir mit der Funktion appendChild innerhalb der Funktion createNewElement ein neues Element, ändern es nach Bedarf und fügen es dem übergeordneten Element hinzu.
Mit der Eigenschaft parentElement können wir das übergeordnete Element des neuen Elements abrufen, nachdem wir es dem DOM hinzugefügt haben.
Verwenden der offsetParent-Eigenschaft:
Unter bestimmten Umständen möchten Sie möglicherweise das Element finden, das der nächstgelegene Vorgänger eines bestimmten Elements ist. Sie können dies mit der Eigenschaft offsetParent erreichen. Das nächstgelegene Vorgängerelement mit einer anderen Position als statisch, was der Standardpositionierung entspricht, wird zurückgegeben.
Hier ist eine Illustration:
const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent;
Im oben genannten Codeausschnitt verwenden wir zunächst die Methode getElementById, um das untergeordnete Element auszuwählen, und dann wird das Attribut offsetParent verwendet, um das am nächsten positionierte Vorfahrenelement zur Variablen namens „positionedAncestor“ zu bestimmen.
Verwenden der parentNode-Eigenschaft mit verschiedenen Knotentypen:
Sie können im DOM-Baum navigieren und zum übergeordneten Element mehrerer Knotenarten gelangen, z. B. Textknoten und Kommentarknoten, sowie zum übergeordneten Element eines HTML-Elements.
Mit der Eigenschaft parentNode, die mit verschiedenen Knotentypen funktioniert, können Sie einfacher durch den DOM-Baum navigieren. Betrachten Sie zur Veranschaulichung Folgendes:
const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode;
In diesem Beispiel verwenden wir die Funktion createTextNode, um einen Textknoten zu erstellen. Anschließend wird die Eigenschaft parentNode verwendet, um das übergeordnete Element abzurufen. Beim Umgang mit komplizierten DOM-Strukturen, die eine Vielzahl von Knoten enthalten, kann diese Strategie hilfreich sein.
Verwenden der parentElement-Eigenschaft mit dem Shadow DOM:
Möglicherweise müssen Sie auf das übergeordnete Element innerhalb der Shadow-DOM-Grenze zugreifen, wenn Sie mit Shadow-DOM arbeiten, einer Webtechnologie, die die Kapselung von DOM-Bäumen und CSS-Stilen ermöglicht.
In diesem Fall ist auch die Eigenschaft parentElement anwendbar.
Betrachten Sie zur Veranschaulichung Folgendes:
const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement;
Das Attribut „shadowRoot“ des Host-Elements wird im obigen Code verwendet, um zunächst den Schattenstamm abzurufen. Mit der Funktion getElementById wählen wir dann das untergeordnete Element innerhalb des Schattenstamms basierend auf seiner ID aus.
Mit der Eigenschaft parentElement können wir schließlich das übergeordnete Element abrufen. Dadurch ist es Ihnen möglich, auch innerhalb eines Shadow-DOM auf das übergeordnete Element zuzugreifen.
Positionierte Elemente mit der Eigenschaft offsetParent:
Sie können die Eigenschaft offsetParent in Verbindung mit den Eigenschaften offsetLeft und offsetTop verwenden, um das nächstgelegene positionierte Vorgängerelement eines bestimmten Elements zu finden, wenn Sie dies explizit benötigen.
Hier ist eine Illustration:
const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } Mit getElementById wählen wir zunächst das Zielelement in dieser Codezeile aus. Danach wird der offsetParent des Zielelements verwendet, um die PositionedAncestor-Variable zu initialisieren.
Der nächste Schritt besteht darin, mithilfe einer While-Schleife zu bestimmen, ob der aktuelle PositionedAncestor die berechnete Position „statisch“ hat.
Wenn dies der Fall ist, wird PositionedAncestor auf den OffsetParent des aktuellen PositionedAncestor aktualisiert.
Dieser Vorgang wird fortgesetzt, bis wir den Vorfahren finden, der unserem aktuellen Standort am nächsten liegt oder die Spitze des DOM-Baums erreichen.
Sie können Ihre Fähigkeit, das übergeordnete Element in JavaScript abzurufen, weiter verbessern, indem Sie diese zusätzlichen Strategien und Methoden verwenden. Diese Methoden bieten Antworten auf eine Reihe von Problemen, einschließlich der Handhabung von Shadow DOM, der Handhabung verschiedener Knotentypen und der Suche nach dem nächsten Vorfahren.
Wählen Sie eine Technik, die Ihren individuellen Anforderungen entspricht und Ihre DOM-Manipulationsfähigkeiten verbessert.
Wenn Sie neuere Methoden oder Funktionen verwenden, vergessen Sie nicht, Ihren Code gründlich in verschiedenen Browsern zu testen, um die Kompatibilität zu überprüfen.
So ermitteln Sie die Monitorgröße
Nachdem Sie sich mit diesen Konzepten vertraut gemacht haben, verfügen Sie über das Wissen und die Fähigkeiten, mit übergeordneten Elementen in JavaScript zu arbeiten und dynamische und interaktive Online-Erlebnisse zu erstellen.
Jetzt stehen Ihnen in JavaScript zusätzliche Methoden zur Verfügung, um das übergeordnete Element zu erreichen.
Das Verständnis dieser Techniken wird Ihre Fähigkeit verbessern, das DOM ordnungsgemäß zu ändern und mit ihm zu interagieren, unabhängig davon, ob Sie mit der Ereignisbehandlung oder dynamischen Elementen arbeiten oder den nächstgelegenen Vorfahren ermitteln müssen.
Wählen Sie immer den Ansatz, der am besten zu Ihrem individuellen Anwendungsfall passt, und berücksichtigen Sie dabei die Browserkompatibilität und die genauen Anforderungen Ihres Projekts. Mit diesen Methoden verfügen Sie über die erforderlichen Fähigkeiten, um die übergeordneten Komponenten in JavaScript problemlos zu erkunden und damit zu arbeiten.