Apa simpul induk dalam javascript?

Question

Saat Anda bekerja dengan elemen DOM, hal umum yang ingin Anda lakukan adalah mendapatkan simpul induk dari suatu elemen

Table of Contents Show

Apa itu simpul induk dan simpul anak?
Apa itu orang tua dan anak dalam JavaScript?
Apa perbedaan antara parentElement dan parentNode?
Bagaimana cara saya mendapatkan simpul induk?

Dalam postingan ini, kita akan belajar cara mendapatkan parent node dari elemen DOM di JavaScript

Karena struktur mirip DOM HTML, elemen disusun dalam pohon. Ini berarti bahwa setiap elemen memiliki simpul induk, dan setiap elemen dapat memiliki beberapa simpul anak

Pertama, mari kita lihat HTML yang akan kita kerjakan

	<div class="parent">
    <div class="child"></div>
</div>

Katakanlah kita ingin mendapatkan simpul induk dari elemen anak. Kita dapat melakukannya dengan terlebih dahulu menanyakan DOM untuk elemen anak

	const child = document.querySelector(".child");

console.log(child);

	<div class="child"></div>

Kemudian, kita bisa mendapatkan simpul induk dari elemen anak dengan menggunakan properti parentNode

	const child = document.querySelector(".child");

const parent = child.parentNode;

console.log(parent);

	<div class="parent">
    <div class="child"></div>
</div>

Satu-satunya elemen yang tidak memiliki simpul induk adalah elemen document. Ini karena elemen document adalah akar dari pohon DOM

Selain elemen document, setiap elemen lainnya memiliki simpul induk sehingga ketika Anda menggunakan properti parentNode, Anda akan selalu mendapatkan elemen kembali

Dalam posting ini, kami belajar cara mendapatkan node induk dari elemen DOM di JavaScript

Cukup kueri DOM untuk elemen yang ingin Anda dapatkan simpul induknya, lalu gunakan properti parentNode untuk mendapatkan simpul induk

Terima kasih sudah membaca

Jika Anda ingin belajar tentang pengembangan web, mendirikan start-up, bootstrap SaaS, dan lainnya, ikuti saya di Twitter. Anda juga dapat bergabung dalam percakapan di Discord resmi kami

Properti parentNode HTML DOM. Properti simpul induk adalah properti hanya-baca yang mengembalikan nama simpul induk dari simpul yang dipilih kepada kita sebagai objek simpul. Objek Node mewakili satu simpul di pohon dokumen dan simpul dapat berupa simpul elemen, simpul teks, atau lebih.

Sintaksis

node.parentNode

Nilai Pengembalian. Properti simpul induk mengembalikan objek simpul induk jika ada atau jika tidak maka akan mengembalikan "null".

Contoh.

html

<h1 style="color:green"________97__93_______

node.parentElement

0

node.parentElement

_1

<

node.parentElement

3

node.parentElement

0

node.parentElement

5<

node.parentElement

7

node.parentElement

8=

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

0

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

1

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

3

node.parentElement

7

node.parentElement

0

node.parentElement

5

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

7

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

9

________92______0

node.parentElement

3

node.parentElement

0

node.parentElement

_1

<<5 <6=<8<9<5

node.parentElement

0

node.parentElement

_1

<

node.parentElement

7

node.parentElement

8=h17h18

node.parentElement

7

node.parentElement

0

node.parentElement

_1

<style3

node.parentElement

0

node.parentElement

5style6

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2style8

style_9

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2=1

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2=3

node.parentElement

5=5

<0style3

node.parentElement

0

Keluaran.

Perbedaan antara DOM parentNode dan parentElement di JavaScript

parentElement. Elemen induk adalah properti hanya baca yang mengembalikan elemen induk dari elemen yang dipilih. Objek elemen mewakili elemen HTML, seperti P, DIV, dll.

Sintaksis.

node.parentElement

_

Nilai Pengembalian. Properti parentElement mengembalikan objek elemen yang mewakili elemen induk jika ada atau akan mengembalikan nol.

Contoh.

html

<h1 style="color:green""color:green"4________93__6_______0

node.parentElement

_1

<"color:green"_9

node.parentElement

0

node.parentElement

5<>GeeksforGeeks</3

node.parentElement

8=>GeeksforGeeks</6>GeeksforGeeks</7>GeeksforGeeks</3

node.parentElement

0

node.parentElement

5<>GeeksforGeeks</3h13>GeeksforGeeks</3

node.parentElement

0

node.parentElement

5<>GeeksforGeeks</3h19>GeeksforGeeks</3

node.parentElement

0

________92______0"color:green"9

node.parentElement

0

node.parentElement

_1

<

node.parentElement

7

node.parentElement

08

node.parentElement

5

node.parentElement

10

node.parentElement

7

node.parentElement

0

node.parentElement

_1

<<5 <6=

node.parentElement

18

node.parentElement

0

node.parentElement

5

node.parentElement

21

________92______0<5

node.parentElement

0

node.parentElement

_25

node.parentElement

5

node.parentElement

27

<

node.parentElement

7

node.parentElement

8=

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

0h18

node.parentElement

7

node.parentElement

0

node.parentElement

_1

<style3

node.parentElement

0

node.parentElement

5

node.parentElement

41

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2

node.parentElement

43

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2

node.parentElement

45

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

2

node.parentElement

47

node.parentElement

5=5

<0style3

node.parentElement

0

Keluaran.

Perbedaan antara DOM parentNode dan parentElement di JavaScript

Perbedaan. Elemen Induk mengembalikan null jika induknya bukan simpul elemen, itulah perbedaan utama antara parentElement dan parentNode. Dalam banyak kasus seseorang dapat menggunakan salah satu dari mereka, dalam banyak kasus, mereka sama. Contohnya

// returns the document node
document.documentElement.parentNode; 

// returns null
document.documentElement.parentElement;

Elemen HTML (dokumen. documentElement) tidak memiliki induk yang merupakan elemen, itu adalah simpul, oleh karena itu, elemen induknya adalah nol

Apa itu simpul induk dan simpul anak?

Setiap subnode dari node yang diberikan disebut node anak, dan node yang diberikan, pada gilirannya, adalah induk dari anak tersebut . Node saudara adalah node pada tingkat hierarki yang sama di bawah node induk yang sama. Simpul yang lebih tinggi dari simpul yang diberikan dalam garis keturunan yang sama adalah nenek moyang dan yang di bawahnya adalah keturunan.

Apa itu orang tua dan anak dalam JavaScript?

Istilah orang tua, anak, dan saudara digunakan untuk menjelaskan hubungan . Dalam pohon simpul, simpul teratas disebut akar (atau simpul akar) Setiap simpul memiliki tepat satu induk, kecuali akar (yang tidak memiliki induk) Sebuah simpul dapat memiliki sejumlah anak. Saudara kandung (saudara laki-laki atau perempuan) adalah simpul dengan orang tua yang sama.

Apa perbedaan antara parentElement dan parentNode?

parentNode memberikan induknya, while. parentElement memberikan undefined .

Bagaimana cara saya mendapatkan simpul induk?

Mendekati. Tulis fungsi rekursif yang mengambil simpul saat ini dan induknya sebagai argumen (simpul akar dilewatkan dengan -1 sebagai induknya). Jika simpul saat ini sama dengan simpul yang diperlukan, maka cetak induknya dan kembali lagi, panggil fungsi secara rekursif untuk anak-anaknya dan simpul saat ini sebagai induk

kode javascript