Maison > Article > interface Web > Comment renvoyer true en JavaScript si l'élément parent contient des éléments enfants ?

Comment renvoyer true en JavaScript si l'élément parent contient des éléments enfants ?

PHPzavant: 2023-09-03 21:01:08684parcourir

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

Dans ce tutoriel, nous apprendrons comment renvoyer true si un élément parent contient un élément enfant en JavaScript. Supposons que vous ayez deux éléments HTML, un élément parent et un élément enfant, et que vous souhaitiez savoir si l'élément parent contient l'élément enfant.

Utilisation de la méthode Node.contains()

La méthode contains() de l'interface Node renvoie une valeur booléenne indiquant si le nœud est un descendant du nœud donné.

Si vous souhaitez savoir si le nœud parent est un élément qui contient des éléments enfants, vous pouvez utiliser la méthode Node.contains().

Ceci est un exemple simple -

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

L'extrait JavaScript ci-dessous vérifie si un élément parent contient un élément enfant.

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

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

Dans le code ci-dessus, nous utilisons la méthode getElementById() pour obtenir la référence des éléments parent et enfant.

Ensuite, nous utilisons parent.contains(child) pour voir si l'élément parent contient des éléments enfants.

Exemple

Voici le code HTML complet -

<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>

Utilisation de la méthode hasChildNodes()

Une autre façon de vérifier si un élément parent contient des éléments enfants consiste à utiliser la méthode hasChildNodes().

Renvoie vrai si la méthode hasChildNodes() contient des éléments enfants.

Ceci est un exemple simple -

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

Voir le code JavaScript ci-dessous -

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

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

Dans le code ci-dessus, nous utilisons la méthode getElementById() pour obtenir la référence des éléments parent et enfant.

Ensuite, nous utilisons la méthode hasChildNodes pour vérifier si l'élément parent existe et si l'élément a des enfants.

Exemple

Voici le code HTML complet -

<!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>

Pour résumer, il existe plusieurs façons de vérifier si un élément parent contient des éléments enfants. Vous pouvez utiliser la méthode Node.contains() ou hasChildNodes().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 接口

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment désactiver la mise à l'échelle unifiée dans Canvas à l'aide de FabricJS ?Article suivant：Comment désactiver la mise à l'échelle unifiée dans Canvas à l'aide de FabricJS ?

Articles Liés

Voir plus