Comment renvoyer true en JavaScript si l'élément parent contient des éléments enfants ?-js tutoriel-php.cn

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

PHPz

Libérer： 2023-09-03 21:01:08

avant

704 Les gens l'ont consulté

如果父元素包含子元素，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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Voir le code JavaScript ci-dessous -

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

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

Copier après la connexion

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>

Copier après la connexion

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!