Heim > Artikel > Web-Frontend > Wie kann ich in JavaScript „true“ zurückgeben, wenn das übergeordnete Element untergeordnete Elemente enthält?

Wie kann ich in JavaScript „true“ zurückgeben, wenn das übergeordnete Element untergeordnete Elemente enthält?

PHPznach vorne: 2023-09-03 21:01:08684Durchsuche

如果父元素包含子元素，JavaScript 中如何返回 true？

In diesem Tutorial erfahren Sie, wie Sie in JavaScript „true“ zurückgeben, wenn ein übergeordnetes Element ein untergeordnetes Element enthält. Angenommen, Sie haben zwei HTML-Elemente, ein übergeordnetes Element und ein untergeordnetes Element, und möchten wissen, ob das übergeordnete Element das untergeordnete Element enthält.

Verwendung der Node.contains()-Methode

Die contains()-Methode der Node-Schnittstelle gibt einen booleschen Wert zurück, der angibt, ob der Knoten ein Nachkomme des angegebenen Knotens ist.

Wenn Sie wissen möchten, ob der übergeordnete Knoten ein Element ist, das untergeordnete Elemente enthält, können Sie die Methode Node.contains() verwenden.

Dies ist ein einfaches Beispiel –

<div id="parent">
   <p id="child">Some text</p>
</div>

Der folgende JavaScript-Codeausschnitt prüft, ob ein übergeordnetes Element ein untergeordnetes Element enthält.

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.contains(child) 
// returns true

Im obigen Code verwenden wir die Methode getElementById(), um die Referenz der übergeordneten und untergeordneten Elemente abzurufen.

Dann verwenden wir parent.contains(child), um zu sehen, ob das übergeordnete Element untergeordnete Elemente enthält.

Beispiel

Hier ist der vollständige HTML-Code -

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="parent">
      <p id="child"></p>
   </div>
   <div id="result"></div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML ="Does parent contain child: "+ parent.contains(child)
   </script>
</body>
</html>

Verwendung der Methode hasChildNodes()

Eine andere Möglichkeit, zu überprüfen, ob ein übergeordnetes Element untergeordnete Elemente enthält, ist die Verwendung der Methode hasChildNodes().

Gibt true zurück, wenn die Methode hasChildNodes() untergeordnete Elemente enthält.

Dies ist ein einfaches Beispiel -

<div id="parent">
   <p id="child">Some text</p>
</div>

Siehe den JavaScript-Code unten -

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.hasChildNoodes();

Im obigen Code verwenden wir die Methode getElementById(), um die Referenz der übergeordneten und untergeordneten Elemente abzurufen.

Dann verwenden wir die Methode hasChildNodes, um zu prüfen, ob das übergeordnete Element vorhanden ist und ob das Element untergeordnete Elemente hat.

Beispiel

Hier ist der vollständige HTML-Code -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <div id="parent">
      <p id="child"></p>
   </div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML = parent.hasChildNodes();
   </script>
</body>
</html>

Zusammenfassend lässt sich sagen, dass es mehrere Möglichkeiten gibt, zu überprüfen, ob ein übergeordnetes Element untergeordnete Elemente enthält. Sie können die Methode Node.contains() oder hasChildNodes() verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript „true“ zurückgeben, wenn das übergeordnete Element untergeordnete Elemente enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 接口

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie deaktiviere ich die einheitliche Skalierung im Canvas mit FabricJS?Nächster Artikel：Wie deaktiviere ich die einheitliche Skalierung im Canvas mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen