Bagaimana untuk mengembalikan benar dalam JavaScript jika elemen induk mengandungi elemen anak?-tutorial js-php.cn

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

PHPz

Lepaskan： 2023-09-03 21:01:08

ke hadapan

705 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Lihat kod JavaScript di bawah -

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!