Bagaimana Anda memeriksa apakah suatu elemen adalah anak dari orang tua di javascript?

Question

Bagaimana kami dapat memeriksa apakah tag p_ adalah turunan dari tag div? . 🧙‍♀️

Table of Contents Show

Menggunakan Node. berisi() metode
Menggunakan metode hasChildNodes()
Bagaimana cara memeriksa apakah suatu elemen adalah anak dari orang tua menggunakan JavaScript?
Bagaimana Anda memeriksa apakah suatu elemen adalah anak dari orang tua?
Bagaimana cara memeriksa apakah suatu elemen memiliki kelas anak di JavaScript?
Bagaimana cara mendapatkan ID anak dari JavaScript ID induk?

Kita dapat memeriksa menggunakan metode contains()_ yang tersedia di elemen induk

Pertama, Mari kita mendapatkan referensi ke tag div elemen induk kita dan tag p tag anak kita menggunakan nama kelas mereka

// get a reference to parent element div tag
const articlesDiv = document.querySelector(".articles");

// next get a refernce to child element p tag
const para = document.querySelector(".para");

Kami mendapatkan semua referensi

Sekarang kita perlu memanggil metode contains() yang tersedia di elemen induk kita dan meneruskan referensi elemen anak

Untuk memeriksa apakah elemen HTML memiliki simpul anak, Anda dapat menggunakan metode hasChildNodes(). Metode ini mengembalikan true jika simpul yang ditentukan memiliki simpul anak, jika tidak false

Katakanlah Anda memiliki cuplikan kode HTML berikut

<html>
<body>
    <div class="wrapper">
        <button id="btn">Click Me</button>
    </div>
</body>
</html>

_

Contoh berikut menunjukkan bagaimana Anda dapat menggunakan metode hasChildNodes() untuk memeriksa apakah tag <body> dan <button> memiliki simpul anak

const body = document.body;
const btn = document.querySelector('button');

console.log(body.hasChildNodes()); // true
console.log(btn.hasChildNodes()); // true

Spasi kosong dan komentar di dalam simpul juga dianggap sebagai simpul teks dan komentar. Jadi, jika Anda membiarkan spasi kosong, komentar, atau umpan baris apa pun di dalam elemen, elemen tersebut masih memiliki simpul anak

Dalam tutorial ini, kita akan melihat bagaimana kita dapat mengembalikan nilai true jika elemen induk berisi elemen anak dalam JavaScript. Dengan asumsi Anda memiliki dua elemen HTML, elemen induk, dan elemen anak, dan Anda ingin tahu apakah elemen induk berisi elemen anak
Menggunakan Node. berisi() metode
Metode berisi () antarmuka Node mengembalikan nilai Boolean, yang menunjukkan apakah sebuah node adalah keturunan dari node yang diberikan atau tidak
Jika Anda ingin mengetahui apakah elemen induk berisi elemen anak, Anda dapat menggunakan Node. berisi() metode

Berikut adalah contoh sederhana −
   
Some text
Cuplikan kode JavaScript di bawah ini memeriksa apakah elemen induk berisi elemen anak
var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.contains(child) 
// returns true
_
Pada kode di atas, kita menggunakan metode getElementById() untuk mendapatkan referensi ke elemen induk dan anak
Kemudian kita menggunakan orang tua. berisi(anak) untuk melihat apakah elemen induk berisi elemen anak

Contoh
Di bawah ini adalah kode lengkap dengan HTML −
   Examples


   
      
   
   
   
Menggunakan metode hasChildNodes()
Cara lain untuk memeriksa apakah elemen induk berisi elemen anak adalah dengan menggunakan metode hasChildNodes()
Metode hasChildNodes() mengembalikan nilai true jika mengandung elemen turunan apa pun
Berikut adalah contoh sederhana −
   
Some text
Lihatlah kode JavaScript di bawah ini −
var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.hasChildNoodes();
Pada kode di atas, kita menggunakan metode getElementById() untuk mendapatkan referensi ke elemen induk dan anak
Kemudian kami menggunakan metode hasChildNodes untuk memeriksa apakah elemen induk memiliki elemen anak atau tidak
Contoh
Di bawah ini adalah kode lengkap dengan HTML −
   Examples


   
   
      
   
   
_
Singkatnya, ada beberapa cara untuk memeriksa apakah elemen induk berisi elemen anak. Anda dapat menggunakan Node. berisi() atau metode hasChildNodes()

Bagaimana cara memeriksa apakah suatu elemen adalah anak dari orang tua menggunakan JavaScript?

Simpul. contains() metode digunakan untuk memeriksa apakah node yang diberikan adalah turunan dari node lain pada level apa pun . Keturunan mungkin secara langsung adalah orang tua dari anak tersebut atau lebih jauh lagi dalam rantai tersebut.

Bagaimana Anda memeriksa apakah suatu elemen adalah anak dari orang tua?

Periksa apakah suatu elemen adalah turunan dari yang lain .

Gunakan metode berisi. const isDescendant = induk. berisi(anak);

Naik dari anak sampai melihat orang tua. // Periksa apakah `anak` adalah turunan dari `parent` const isDescendant = function (parent, child) { let node = child. parentNode;

Bagaimana cara memeriksa apakah suatu elemen memiliki kelas anak di JavaScript?

Menggunakan metode hasChildNodes() . var induk = dokumen. getElementById("induk"); . getElementById("anak"); .

Bagaimana cara mendapatkan ID anak dari JavaScript ID induk?

Di bawah ini adalah kode di mana kita mendapatkan elemen div anak dengan nomor indeksnya dan menerapkan properti innerHTML dengan JavaScript ke elemen anak tersebut. var induk = dokumen. getElementById('parent Div'); . childNodes; . .