JavaScript Übergeordnetes Element abrufen

Anika Tabassum Era 15 Februar 2024

JavaScript JavaScript Parent

Holen Sie sich Eltern mit den Eigenschaften parentNode und parentElement
Verwenden Sie die Eigenschaft parentNode, um das übergeordnete Element abzurufen
Verwenden Sie die Eigenschaft parentElement, um Parent zu erhalten

JavaScript Übergeordnetes Element abrufen

In JavaScript sind die Eigenschaften zum Abrufen des Namens und der Details des übergeordneten Elements parentNode und parentElement. Diese beiden Eigenschaften spielen bei der Definition des übergeordneten Knotens eine identische Rolle, ihre Leistung unterscheidet sich jedoch geringfügig.

Das parentElement ist eine schreibgeschützte Eigenschaft, die sich nur auf das Ergebnis des übergeordneten Elements einer angegebenen Struktur konzentriert. Im Gegensatz dazu ist parentNode auch eine schreibgeschützte Eigenschaft, die den Objektknoten darstellt, der einen der Dokumentbaumknoten darstellt.

Holen Sie sich Eltern mit den Eigenschaften `parentNode` und `parentElement`

In diesem Beispiel untersuchen wir das Verhalten der beiden Eigenschaften, um das übergeordnete Element einer HTML-Struktur abzurufen. Wenn wir den Unterschied definieren, müssen wir eine Ausnahme anzeigen.

Code-Auszug:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <script>
  console.log(document.documentElement.parentNode);
  console.log(document.documentElement.parentElement);
  </script>
</body>
</html>

Ausgang:

Übergeordnetes Element mit den Eigenschaften parentNode und parentElement abrufen1

Code-Auszug:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <script>
  console.log(document.documentElement.parentNode.nodeName);
  console.log(document.documentElement.parentElement.nodeName);
  </script>
</body>
</html>

Ausgang:

Übergeordnetes Element mit den Eigenschaften parentNode und parentElement abrufen2

Wie Sie sehen können, hat die Eigenschaft parentNode den Ausgangsknoten #documenet, aber das parentElement gibt eine null zurück. Als wir versuchten, den Knotennamen zu extrahieren, erhielten wir außerdem einen TypeError für parentElement.

Verwenden Sie die Eigenschaft `parentNode`, um das übergeordnete Element abzurufen

Lassen Sie uns eine Instanz haben, die zeigt, dass die Instanz eines Kindes verwendet werden kann, um seinen unmittelbaren Elternteil aus dem Hierarchiebaum zu erhalten. Wir nehmen eine verschachtelte div-Struktur und nehmen das zuletzt angegebene div-Element als untergeordnetes Element.

Code-Auszug:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="parent">
  <div id="p2">
    <div id="child"></div>
  </div>
</div>
  <script>
  var ch=document.getElementById("child");
    console.log(ch.parentNode.nodeName);
    console.log(ch.parentNode);
  </script>
</body>
</html>

Ausgang:

Use parentNode Property to get the Parent

Wir haben den Knotennamen sowie den Knoten selbst zur Demonstration. Der ausgewählte Elternteil war derjenige mit der id-p2.

Verwenden Sie die Eigenschaft `parentElement`, um Parent zu erhalten

In diesem Beispiel wird das unmittelbar übergeordnete Element der Instanz unserer ausgewählten untergeordneten Elemente abgerufen.

Code-Auszug:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li id="child"></li>
</ul>
  <script>
  var ch=document.getElementById("child");
    console.log(ch.parentElement.nodeName);
  </script>
</body>
</html>