Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengembalikan benar dalam JavaScript jika elemen induk mengandungi elemen anak?

Bagaimana untuk mengembalikan benar dalam JavaScript jika elemen induk mengandungi elemen anak?

PHPzke hadapan: 2023-09-03 21:01:08684semak imbas

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

Dalam tutorial ini, kita akan belajar cara mengembalikan true jika elemen induk mengandungi elemen anak dalam JavaScript. Katakan anda mempunyai dua elemen HTML, elemen induk dan elemen anak, dan anda ingin mengetahui sama ada elemen induk mengandungi elemen anak.

Menggunakan kaedah Node.contains()

Kaedah contains() antara muka Node mengembalikan nilai Boolean yang menunjukkan sama ada nod itu adalah keturunan nod yang diberikan.

Jika anda ingin tahu sama ada nod induk ialah elemen yang mengandungi elemen anak, anda boleh menggunakan kaedah Node.contains().

Ini ialah contoh mudah -

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

Coretan kod JavaScript di bawah menyemak sama ada elemen induk mengandungi elemen anak.

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

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

Dalam kod di atas, kami menggunakan kaedah getElementById() untuk mendapatkan rujukan elemen ibu bapa dan anak.

Kemudian kami menggunakan parent.contains(child) untuk melihat sama ada elemen induk mengandungi elemen child.

Contoh

Berikut ialah kod HTML penuh -

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

Menggunakan kaedah hasChildNodes()

Cara lain untuk menyemak sama ada elemen induk mengandungi sebarang elemen anak ialah menggunakan kaedah hasChildNodes().

Berhasil jika kaedah hasChildNodes() mengandungi sebarang elemen anak.

Ini adalah contoh mudah -

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

Lihat kod JavaScript di bawah -

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

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

Dalam kod di atas, kami menggunakan kaedah getElementById() untuk mendapatkan rujukan elemen induk dan anak.

Kemudian kami menggunakan kaedah hasChildNodes untuk menyemak sama ada elemen induk wujud dan jika elemen itu mempunyai anak.

Contoh

Berikut ialah kod HTML penuh -

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

Untuk meringkaskan, terdapat beberapa cara untuk menyemak sama ada elemen induk mengandungi elemen anak. Anda boleh menggunakan kaedah Node.contains() atau hasChildNodes().

Atas ialah kandungan terperinci Bagaimana untuk mengembalikan benar dalam JavaScript jika elemen induk mengandungi elemen anak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 接口

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk melumpuhkan penskalaan bersatu dalam kanvas menggunakan FabricJS?

Artikel berkaitan

Lihat lagi